• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help tricky class priorities.

blackout

blackout

midnight reel
so, here i'm trying to get [class=post] to be added after a click and subsequently execute its animation (which is to essentially slide in). however, when i try to do this, the class that i set to expand and become the background always takes priority over post. i've tried z-index: 10; as well as messing around with different placements, but i just can't figure it out. help would be greatly appreciated!

[class=var] --main: #C5D4CD; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important [/class] [class=bkg] position: relative; margin: auto; width: 497px; height: 400px; background-color: rgba(235,235,235,1); overflow: hidden; [/class] [class=back] position: absolute; overflow: visible; width: 471px; height: 376px; left: 13px; top: 12px; background: #CBDCD5; [/class] [class=img] position: absolute; overflow: visible; width: 471px; height: 367px; left: 13px; top: 12px; background: url('https://www.pngitem.com/pimgs/m/527-5273703_black-and-white-line-art-floral-design-drawing.png'); padding-top: 60px; mix-blend-mode: multiply; background-size: 100%; [/class] [class=text] position: absolute; overflow: visible; width: 224px; height: 142px; left: 137px; top: 145px; background: url('https://i.imgur.com/T2Z80zB.png'); background-size: 170%; background-position: center center; [/class] [class=tex2] position: absolute; overflow: visible; width: 471px; height: 102px; left: 13px; top: 155px; background: var(--main); [/class] [class=plots] position: absolute; overflow: visible; width: 281px; height: 85px; left: 35px; top: 43px; background: #F7F7F7; animation: {post_id}plots 2s; animation-delay: 2s; z-index: 10; [/class] [class=me] position: absolute; overflow: visible; width: 132px; height: 235px; left: 330px; top: 33px; background: #F7F7F7; [/class] [class=more] position: absolute; overflow: visible; width: 427px; height: 85px; left: 35px; top: 284px; background: #F7F7F7; [/class] [class=dropbox] animation-name: {post_id}drop; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=extend] top: 147px; transform: scaleY(3.655); transition: 0.5s; [/class] [class=hidden] position: absolute; display: none; [/class] [animation=plots] [keyframe=0] top: -195px; left: 20px; [/keyframe] [keyframe=100] top: 35px; top: 43px; [/keyframe] [/animation] [animation=drop] [keyframe=0] box-shadow: 0px 0px 0px #AEC3B9; transform: translateX(0) translateY(0); [/keyframe] [keyframe=100] box-shadow: 10px -9px 0px #AEC3B9; transform: translateX(-8px) translateY(8px); [/keyframe] [keyframe=0] box-shadow: 0px 0px 0px #AEC3B9; transform: translateX(0) translateY(0); [/keyframe] [/animation] [script class=img on=mouseenter] addClass dropbox bkg [/script] [script class=text on=mouseenter] addClass dropbox bkg [/script] [script class=tex2 on=mouseenter] addClass dropbox bkg [/script] [script class=img on=click] addClass plots addClass extend tex2 fadeOut 0300 img fadeOut 0300 text [/script] [script class=text on=click] addClass plots addClass extend tex2 fadeOut 0300 img fadeOut 0300 text [/script] [script class=tex2 on=click] addClass plots addClass extend tex2 fadeOut 0300 img fadeOut 0300 text [/script] [div class=var] [div class=bkg] [div class=back] [/div] [div class=img] [/div] [div class=tex2][/div] [div class=text] [/div] [/div] [/div] [div class="plots hidden"][/div]


Code: 
[nobr]
	[class=var]
		--main: #C5D4CD;
                cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
	[/class]
	[class=bkg]
		position: relative;
		margin: auto;
		width: 497px;
		height: 400px;
		background-color: rgba(235,235,235,1);
		overflow: hidden;
	[/class]
	[class=back]
		position: absolute;
		overflow: visible;
		width: 471px;
		height: 376px;
		left: 13px;
		top: 12px;
		background: #CBDCD5;
	[/class]
	[class=img]
		position: absolute;
		overflow: visible;
		width: 471px;
		height: 367px;
		left: 13px;
		top: 12px;
		background: url('https://www.pngitem.com/pimgs/m/527-5273703_black-and-white-line-art-floral-design-drawing.png');
		padding-top: 60px;
		mix-blend-mode: multiply;
		background-size: 100%;
	[/class]
	[class=text]
		position: absolute;
		overflow: visible;
		width: 224px;
		height: 142px;
		left: 137px;
		top: 145px;
                background: url('https://i.imgur.com/T2Z80zB.png');
		background-size: 170%;
background-position: center center;
	[/class]
	[class=tex2]
		position: absolute;
		overflow: visible;
		width: 471px;
		height: 102px;
		left: 13px;
		top: 155px;
                background:	var(--main);
	[/class]
	[class=plots]
		position: absolute;
		overflow: visible;
		width: 281px;
		height: 85px;
		left: 35px;
		top: 43px;
                background: #F7F7F7;
                animation: {post_id}plots 2s;
                animation-delay: 2s;
                z-index: 10;
	[/class]
	[class=me]
		position: absolute;
		overflow: visible;
		width: 132px;
		height: 235px;
		left: 330px;
		top: 33px;
                background: #F7F7F7;
	[/class]
	[class=more]
		position: absolute;
		overflow: visible;
		width: 427px;
		height: 85px;
		left: 35px;
		top: 284px;
                background: #F7F7F7;
	[/class]
        [class=dropbox]
                animation-name: {post_id}drop;
                animation-duration:1.7s;
                animation-fill-mode:forwards;
	[/class]
        [class=extend]
                top: 147px;
                transform: scaleY(3.655);
                transition: 0.5s;
	[/class]
        [class=hidden]
                position: absolute;
                display: none;
	[/class]

[animation=plots]
        [keyframe=0]
                top: -195px;
                left: 20px;
        [/keyframe]
        [keyframe=100]
                top: 35px;
                top: 43px;
        [/keyframe]
[/animation]

[animation=drop]
        [keyframe=0]
                box-shadow: 0px 0px 0px #AEC3B9;
                transform: translateX(0) translateY(0);
        [/keyframe]
        [keyframe=100]
                box-shadow: 10px -9px 0px #AEC3B9;
                transform: translateX(-8px) translateY(8px);
        [/keyframe]
        [keyframe=0]
                box-shadow: 0px 0px 0px #AEC3B9;
                transform: translateX(0) translateY(0);
        [/keyframe]
[/animation]

        [script class=img on=mouseenter]
                addClass dropbox bkg
        [/script]
        [script class=text on=mouseenter]
                addClass dropbox bkg
        [/script]
        [script class=tex2 on=mouseenter]
                addClass dropbox bkg
        [/script]

        [script class=img on=click]
                addClass plots
                addClass extend tex2
                fadeOut 0300 img
                fadeOut 0300 text
        [/script]
        [script class=text on=click]
                addClass plots
                addClass extend tex2
                fadeOut 0300 img
                fadeOut 0300 text
        [/script]
        [script class=tex2 on=click]
                addClass plots
                addClass extend tex2
                fadeOut 0300 img
                fadeOut 0300 text
        [/script]

[div class=var]
[div class=bkg]
	[div class=back]
	[/div]
	[div class=img]
	[/div]
[div class=tex2][/div]
	[div class=text]
	[/div]
[/div]
[/div]
[div class="plots hidden"][/div]
[br][/br]
[/nobr]
 
Last edited:
So I am confused by what you're looking for, so I'll just give some general recommendations first.

For your script, instead of making three scripts that all do the same thing for three different class, make one script for one overall div that encompasses everything, and run the addclass to everything from there.

I see that you are placing everything together using position: absolute. Instead, try nesting your divs and using position: relative. This way you don't have to make multiple things have the same classes, you only need to apply 1 class to the largest div.

Using CSS Animations is fine, but for something this simple, you should use CSS transitions instead. It'll clean up the code and you don't have to worry about it weird stuff like fill-mode.

As for the code itself. I'm confused by what you're trying to achieve.
 
So the main problem then is that you aren't removing the class hidden from plots. My other reccs will help to position and center plots.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
194
A Murder Of Corviknight
A Murder Of Corviknight
roxybirdie
Closed music player button [resolved]
Replies
2
Views
391
roxybirdie
roxybirdie
mizton
Help quote bubble codes?
Replies
1
Views
139
Uxie
Uxie
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
81
JCKane
JCKane
Back
Top