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

Help tricky class priorities.

fated

𝐛𝐚𝐛𝐲 𝐛𝐥𝐮𝐞 𝐛𝐮𝐭𝐭𝐞𝐫𝐟𝐥𝐲
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!




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:

Alteras

The Sleepy One
Moderator
Supporter
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.
 

Alteras

The Sleepy One
Moderator
Supporter
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.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top