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!

    Remember to credit artists when using work not your own.

Closed Star of Arcadia ☆ Workshop (Freebies)

Alteras

The Sleepy One
Moderator
Supporter
[div class=container][div class=glaze][div class=tabsContainer][div class=tabNames]
[div class="tabName titleName"]Title Screen[/div]
[div class="tabName introName"]Introduction[/div]
[div class="tabName requestsName"]Requests[/div]
[div class="tabName bbcodeName"]BBcode List[/div]
[/div][div class=tabs]
[div class="tab titletab"][div=display:none]1[/div][/div]
[div class="tab introtab"][div=display:none]2[/div][/div]
[div class="tab requeststab"][div=display:none]3[/div][/div]
[div class="tab bbcodetab"][div=display:none]4[/div][/div]
[/div][/div][div class="spoke titleSpoke"][div class=contentContainer]
[div class="content titleContent"]
[div class=Title]Star of Arcadia[/div][/div]
[div class="header titleHeader"][div class=caption][div= display:inline]BBcode Workshop by Alteras Alteras [/div][div=font-size: 0.5em; display: inline;]Background Art by Rosuuri[/div]
[div= font-size:0.6em; display:block; top: 2em; position:absolute;]Freebies ● Requests ● Interest Checks ● In-Character Posts ● Character Sheets[/div][/div]
[/div]
[/div][/div][div class="spoke introSpoke"][div class=contentContainer]
[div class="content introContent"][div class=scroll]Hello and welcome to Star of Arcadia!
 I am Alteras Alteras , and this is my second BBcode Workshop. Because of how amazing the new release of BBcode+ is (psst~ click on the star over there), I decided to close my old BBcode workshop, Dreams of Arcadia, and open a BBcode workshop using solely BBcode+. Keeping in theme with the last one, the lorem ipsum to be used will be some text I write about my own fantasy world "Arcadia," the mythical and idyllic land that all in the multiverse wants to reach. Since I decided to retain the theme of Arcadia, I decided to connect the image to the previous image, here being a star.
 So I have a small background in web design, so when BBcode+ came out and I saw we have classes, I practically fell over in excitement. I screamed for a solid minute before lying down in bed for the next hour. And to my greater surprise, we have BBscript! Which means we can do even crazier stuff without messing with the horrible accordions (click on the star if you haven't already). Unfortunately, at the time of writing this, the repertoire of functions we can use in BBscripts is fairly small, however, with a bit of math and alot of spaghetti coding, we can make Boolean Logic Gates (thank you TI-Basic coding).
 I guess I should properly explain this workshop and the BBcode I create. So I primarily focus on image preservation, meaning that an image will look good no matter what screen it is. Of course, this doesn't necessarily mean that everything I make is Mobile Friendly. Just like last time, I'll be using a 3-tier system to denote the Mobile Friendliness of a post, going from Mobile Friendly, to Mobile Compatible, to Desktop Only. This post would be considered Mobile Friendly by the way, because all of the text can be seen properly, and all the functions operate the same way as a desktop version would.
 This workshop will not only contain new BBcodes that I make, but will also contain remakes of my old code, code that suffered from the horrors of having to deal with accordions to get their effects. If I don't bring over an old code, that means I found it too troublesome for my time or that I don't have the motivation, so if I made a code in the past that you'd like to see again, I might or might not remake it. In any case, I take requests, but do be warned that the time it takes to make the code depends on the complexity and my schedule.
 I think that covers everything. Everything else can be covered in the other sections.
Thank you for visiting!     
Alteras Alteras     ​
[/div][/div]
[div class="header introContent"][div=color:var(--tab-color-2); display:inline]Intro[/div]duction
[/div][/div][/div][div class="spoke requestsSpoke"][div class=contentContainer]
[div class="content requestsContent"][div class=scroll] I'll be accepting requests, both for new BBcode and minor alterations to my code. However, I do ask that you be descriptive in your requests. Feel free to post on this thread or pm me. Depending on the level of difficulty in the request, it could take me anywhere from a day to a few weeks to complete a request, although that's only in rare cases. If you want, I can include your text in the template, so it'll be easier for the both of us to see what it actually looks like. I do have a list of minimum requirements:
  • Mobile Priority - How high up do you want your code to be mobile friendly? Do you want full on support, where everything looks good on any device? Are you okay with it sacrificing readability for presentation? Or do you just want to pretend that smartphones don't even exist and go full PC? The scale goes from Mobile Friendly to Mobile Compatible to Desktop Only. For comparison, this intro post would be considered Mobile Friendly.
  • Expected Color Palette and Image - Makes it much easier for me. If you don't want to, I can drop in my own color palette and image, but at least give me an idea of how many colors do you see in this thing.
  • Type of Post - Is this geared towards Character Sheets, Interest Checks, In-Character Posts, or something else entirely?
  • Freebie or Nah? - This is self explanatory. If you don't want it to be a freebie, it won't appear on this thread. Credit must still remain in the code in any case. If I decide to display the code anyway, that means that I found the code to be so good that it should be openly shared.
  • The Star - What you want me to make! I can't read your mind, so you need to be as descriptive in your request as possible. I'll probably draw out something or make a prototype to let you see.
 Once again, I take requests to alter my code. Many of the bbcode I make contains CSS variables that can be changed to fit almost anything. I always clean up my code, removing the values, when i release the freebie, so it isn't odd to find it not working if you just copy and paste it.
[/div][/div]
[div class="header requestsContent"][div=color:var(--tab-color-3); display:inline]Re[/div]quests
[/div][/div][/div][div class="spoke bbcodeSpoke"][div class=contentContainer]
[div class="content bbcodeContent"][div class=scroll]
Reference Chart
Mobile Friendly -
Mobile Compatible -
Desktop Only -
By Request -
Possible Revisions in the Future -
Link to Code -

To change template attributes, input desired values where requested at the beginning of the code. It should look like --variable: value. For image URLs, look for background-image()
[/div][/div]
[div class="header bbcodeHeader"][div=color:var(--tab-color-4); display:inline]List[/div] of BBcode
[/div][/div]
[/div][/div][div class=circle]
[div class=circleClose]Close[/div]
[div class=circleOpen]Open[/div]
[/div][/div][nobr]



[class=container]
--img-w: 2100;
--img-h: 1200;
--cir-center-h: 61.08%;
--cir-center-w: 26.86%;
--cir-radius: 12.7;
--cir-thickness: .5vw;
--bg-color: rgba(191, 217, 242, 0.9);
--divide-thick: .25vw;
--tab-color-1:#eab040;
--tab-color-2:#32254b;
--tab-color-3:#8F5465;
--tab-color-4:#7582C4;
color:gray;
width: 100%;
padding-top: calc( var(--img-h) / var(--img-w) * 100%);
background-image:url('https://www.rpnation.com/media/cache_e28c5ac3-dd5a-432b-c35b-33c516ed1b73-png.33740/full');
background-size:contain;
position:relative;
overflow:hidden;
[/class]

[class=glaze]
--cir-radius-math: calc( var(--cir-radius) / 100 * 100%);
width: 100%;
padding-top: calc( var(--img-h) / var(--img-w) * 100%);
background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness)));
position: absolute;
top:0;
clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out;
[/class]

[class=glazeOpen]
clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s;
[/class]



[class=tabsContainer]
z-index:10;
position: absolute;
width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) );
height: calc( 2vw + 6px);
top: calc( var(--cir-center-h) - var(--divide-thick) / 2 );
left: 0;
border-top: var(--divide-thick) solid white;
[/class]

[class=tabNames]
width: 100%;
height: auto;
bottom: calc( 100% + var(--divide-thick) );
position: absolute;
[/class]

[class=tabName]
width: 100%;
height: auto;
box-sizing: border-box;
position: absolute;
bottom:0;
font-size: calc(1vw + 6px);
text-align: center;
opacity:0;
transition: opacity .5s ease-in;
[/class]

[class=tabNameShow]
opacity: 1;
[/class]

[class=tabs]
width: 100%;
height: 100%;
display: flex;
flew-flow: row nowrap;
justify-content: space-around;
font-size: calc(1vw + 6px);
[/class]

[class=tab]
flex: 1 1 auto;
text-align: center;
cursor: pointer;
[/class]

[class=titletab]
color: var(--tab-color-1);
transition: all .5s ease-in;
[/class]

[class name=titletab state=hover]
color: white;
background-color: var(--tab-color-1);
[/class]

[class=titleName]
color: var(--tab-color-1);
transition: opacity .5s ease-in;
[/class]

[script class=titletab on=mouseenter]
addClass tabNameShow titleName
[/script]

[script class=titletab on=mouseleave]
removeClass tabNameShow titleName
[/script]

[class=introtab]
color: var(--tab-color-2);
transition: all .5s ease-in;
[/class]

[class name=introtab state=hover]
color: white;
background-color: var(--tab-color-2);
[/class]

[class=introName]
color: var(--tab-color-2);
[/class]

[script class=introtab on=mouseenter]
addClass tabNameShow introName
[/script]

[script class=introtab on=mouseleave]
removeClass tabNameShow introName
[/script]

[class=requeststab]
color: var(--tab-color-3);
transition: all .5s ease-in;
[/class]

[class name=requeststab state=hover]
color: white;
background-color: var(--tab-color-3);
[/class]

[class=requestsName]
color: var(--tab-color-3);
[/class]

[script class=requeststab on=mouseenter]
addClass tabNameShow requestsName
[/script]

[script class=requeststab on=mouseleave]
removeClass tabNameShow requestsName
[/script]

[class=bbcodetab]
color: var(--tab-color-4);
transition: all .5s ease-in;
[/class]

[class name=bbcodetab state=hover]
color: white;
background-color: var(--tab-color-4);
[/class]

[class=bbcodeName]
color: var(--tab-color-4);
[/class]

[script class=bbcodetab on=mouseenter]
addClass tabNameShow bbcodeName
[/script]

[script class=bbcodetab on=mouseleave]
removeClass tabNameShow bbcodeName
[/script]



[class=spoke]
--math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) );
position: absolute;
height: 100%;
width: 100%;
bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 );
left: var(--math);
border-bottom: var(--divide-thick) white solid;
transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom;
transform: rotate(-270deg);
opacity: 0;
transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s;
[/class]

[class=SpokeReveal]
transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s;
transform: rotate(0deg);
opacity: 1;
[/class]

[class=contentContainer]
height: 100%;
width: calc( 100% - var(--math) );
left:0;
position:relative;
[/class]

[class=content]
width: calc( 100% - 5px);
height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px);
max-height:0;
bottom: 0;
left:0;
overflow: hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]

[class=scroll]
height: auto;
max-height: 100%;
padding-top: 15px;
width: calc( 100%);
bottom: 0;
position: absolute;
padding-right: 200px;
overflow-y: scroll;
[/class]

[class=header]
width: 100%;
height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2);
max-height:0;
top: calc(100% + var(--divide-thick) );
line-height: .9;
font-size: calc( 5.5vw + 2px );
overflow:hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]


[class=Title]
height: auto;
left:0;
bottom: 0;
position: absolute;
color: white;
font-size: calc( 5.5vw + 8px );
line-height:.9;
[/class]

[class=caption]
width:100%;
height: 4vw;
font-size: calc( 1.75vw + 6px );
line-height: 1.2;
position: absolute;
[/class]


[class=ShowContent]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[class=ShowHeader]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[class=circle]
width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) );
height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness));
box-sizing: border-box;
border-radius: 50%;
top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) );
left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) );
right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) );
position: absolute;
cursor: pointer;
border: 0px white solid;
transition: border-width .5s ease-in-out 1s;
[/class]

[class=circleReveal]
transition: border-width .5s ease-in-out;
border-width: calc(var(--cir-thickness) + 2px);
[/class]

[class=circleClose]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpen]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpacity]
opacity:1;
[/class]

[script=circle]
set isOpen 1
addClass circleReveal circle
addClass glazeOpen glaze
[/script]

[script class=circle on=mouseenter]
if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen)
[/script]

[script class=circle on=mouseleave]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
[/script]

[script class=circle on=click]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
if (eq ${isOpen} 1) (removeClass glazeOpen glaze)
if (eq ${isOpen} 1) (removeClass circleReveal circle)
if (eq ${isOpen} 0) (addClass glazeOpen glaze)
if (eq ${isOpen} 0) (addClass circleReveal circle)
if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1)
[/script]

[script=tab]
set TabSel 0
set TabHis 1
addClass ShowContent titleContent
addClass ShowHeader titleHeader
addClass SpokeReveal titleSpoke
[/script]

[script class=tab on=click]
set TabSel (getText)
if (eq ${TabSel} ${TabHis}) (stop)
//if tab selected is current tab, stop.
if (eq ${TabHis} 1) (removeClass ShowContent titleContent)
if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader)
if (eq ${TabHis} 2) (removeClass ShowContent introContent)
if (eq ${TabHis} 2) (removeClass ShowHeader introHeader)
if (eq ${TabHis} 3) (removeClass ShowContent requestsContent)
if (eq ${TabHis} 3) (removeClass ShowHeader requestsHeader)
if (eq ${TabHis} 4) (removeClass ShowContent bbcodeContent)
if (eq ${TabHis} 4) (removeClass ShowHeader bbcodeHeader)

//hide the text and prepare for SPINNING
if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke)
if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke)
if (eq ${TabHis} 3) (removeClass SpokeReveal requestsSpoke)
if (eq ${TabHis} 4) (removeClass SpokeReveal bbcodeSpoke)

//spinning to hide spoke complete. Prepare to spin spoke into view
if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke)
if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke)
if (eq ${TabSel} 3) (addClass SpokeReveal requestsSpoke)
if (eq ${TabSel} 4) (addClass SpokeReveal bbcodeSpoke)

//spinning complete. Show the new stuff
if (eq ${TabSel} 1) (addClass ShowContent titleContent)
if (eq ${TabSel} 1) (addClass ShowHeader titleHeader)
if (eq ${TabSel} 2) (addClass ShowContent introContent)
if (eq ${TabSel} 2) (addClass ShowHeader introHeader)
if (eq ${TabSel} 3) (addClass ShowContent requestsContent)
if (eq ${TabSel} 3) (addClass ShowHeader requestsHeader)
if (eq ${TabSel} 4) (addClass ShowContent bbcodeContent)
if (eq ${TabSel} 4) (addClass ShowHeader bbcodeHeader)
set TabHis ${TabSel}
[/script]

[/nobr]
 
Last edited:

MISTER UN. 0W3N

schaden f r e u d e
[div=
font-size: 12px;]So... that animation in your title banner... can you showcase how you used BBCode+ to make it animated? I'd love to know how the flipping fuck you did it because it's fucking amazing.[/div]
 

Vesuvius

‘ —◆— so cry me a river of gold ”
ahh this is the most beautiful thing ive seen in forever and a bit! i'm just looking at that and wondering how many hours you've spent on this and how this is even possible? i could just stare at this all day.

also, i just want to note the fact that the intro doesn't seem scrollable or maybe it's just for me? i've run into the same problem before and it seems to be a problem with defining a width for the div class or something? nvm it seems to be just a personal problem
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
Alteras Alteras -intense stare- "T-Teach me senpai."
[div=
font-size: 12px;]So... that animation in your title banner... can you showcase how you used BBCode+ to make it animated? I'd love to know how the flipping fuck you did it because it's fucking amazing.[/div]

I’ll make a showcase post explaining how it is done. Well a lot of it comes down to transitions and addClass/removeClass. Either that or I’ll just make a guide explaining transition and how to use it with BBscript.
ahh this is the most beautiful thing ive seen in forever and a bit! i'm just looking at that and wondering how many hours you've spent on this and how this is even possible? i could just stare at this all day.

also, i just want to note the fact that the intro doesn't seem scrollable or maybe it's just for me? i've run into the same problem before and it seems to be a problem with defining a width for the div class or something? nvm it seems to be just a personal problem
Thank you very much! It took me about a week, from concept to completion. Actual work began on Saturday. Are you scrolling on mobile or on a computer?
 

youngkyun

sad but rad
Mobile Priority - Mobile Compatible is fine.
Freebie or Nah? - It can be a freebie I don't mind.
Expected Color Palette and Image - I like a lot of pastel color, maybe something pastel pink?
The Star - I would like tabs with the pictures from your first one (the home screen, edit button, etc), a few picture spots, (you can put your own and I can fit mine into them). I usually like smaller codes, so not full screen codes. I want a gallery tab too since I tend to go overboard with pictures sometimes. I really don't have an ideal image in my head, I just want you too put your own flavor and have fun with it.
 

bb.bug

hero
I'm also having issues reading the code unfortunately! D: it's a safari specific issue, as I just checked it against my chrome and I can see it just fine.
 

Alteras

The Sleepy One
Moderator
Supporter
I'm also having issues reading the code unfortunately! D: it's a safari specific issue, as I just checked it against my chrome and I can see it just fine.
That's weird, it works on my safari? is it the scrolling?
 

Alteras

The Sleepy One
Moderator
Supporter
ahh this is the most beautiful thing ive seen in forever and a bit! i'm just looking at that and wondering how many hours you've spent on this and how this is even possible? i could just stare at this all day.

also, i just want to note the fact that the intro doesn't seem scrollable or maybe it's just for me? i've run into the same problem before and it seems to be a problem with defining a width for the div class or something? nvm it seems to be just a personal problem
I tweaked the way it sizes itself. Hopefully it works now.
 

deer

𝘆𝗼𝘂’𝗿𝗲 𝗮𝘀 𝘀𝗮𝗻𝗲 𝗮𝘀 𝗶 𝗮𝗺
Helper
Alteras Alteras ; this is beautiful work ! c'est magnifique!

edit; i would also like to mention that your code is mobile friendly and that’s so flipping amazing as well? so hype!
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
Alteras Alteras

Mac safari then?

https://cdn.discordapp.com/attachme...6448/Screen_Shot_2018-01-27_at_3.00.38_AM.png

The rotating animation also comes from the right which is bizarre LOL in some unlucky instances the text will just straight up disappear


Huh... my friend had that exact same problem on iOS until he updated his phone. Something weird is happening with the background-image property and the transform origin property, most likely having to do with how it positions itself...

Edit: I think I found what I need to add to fix it, but I won’t be able to tell if it works
 
Last edited:

ewolf20

the aspiring roleplayer
are you currently taking request? if you are i'm just going to ask for something simple..sort. (hint: it might tabs cuz i love them so much).
 

Alteras

The Sleepy One
Moderator
Supporter
ewolf20 ewolf20 I can take your request right now. Several of the requests I'm already taking asks for tabs, so it might coincide with your request in terms of design and layout.
 

Alteras

The Sleepy One
Moderator
Supporter
Star of Arcadia
With the new release of BBcode+, we can do a lot of fancy things now. Spinning tabs, appearing and disappearing text, buttons to make things go in and out (press the star!!), a lot of things can now occur. Since BBcode+ is so groundbreaking, I decided to open a new BBcode shop with this as its intro post. It's applications in normal uses is very limited, but I'll release the code anyway. To achieve mobile compatibility and viewability on all screens, extensive use of percentages, viewport units, and calc()s were needed. All of the math is based on the ratio maintaining code that keeps the div at the proper size for the image. Due to the nature of this code, I will only explain how the different parts of it work together and will not explain the math that was needed to make it exactly this post. Here is the full code of it:
Code:
[div class=container][div class=glaze][div class=tabsContainer][div class=tabNames][font=Comfortaa]
[div class="tabName titleName"]Title Screen[/div]
[div class="tabName introName"]Introduction[/div]
[div class="tabName requestsName"]Requests[/div]
[div class="tabName bbcodeName"]BBcode List[/div]
[/font][/div][div class=tabs]
[div class="tab titletab"][div=display:none]1[/div][fa]fa-tv fa-fw[/fa][/div]
[div class="tab introtab"][div=display:none]2[/div][fa]fa-user-o fa-fw[/fa][/div]
[div class="tab requeststab"][div=display:none]3[/div][fa]fa-commenting-o fa-fw[/fa][/div]
[div class="tab bbcodetab"][div=display:none]4[/div][fa]fa-code fa-fw[/fa][/div]
[/div][/div][div class="spoke titleSpoke"][div class=contentContainer]
[div class="content titleContent"]
[div class=Title][font=Comfortaa][color=#eab040]Star[/color] of Arcadia[/font][/div][/div]
[div class="header titleHeader"][font=Comfortaa][div class=caption][div= display:inline]Subtitle[/div][div=font-size: 0.5em; display: inline;][sup]Smallest Subtitle[/sup][/div]
[div= font-size:0.6em; display:block; top: 2em; position:absolute;]Smaller Subtitle[/div][/div][/font][/div]
[/div][/div][div class="spoke introSpoke"][div class=contentContainer]
[div class="content introContent"][div class=scroll][font=Open Sans]

Introduction content


[/font][/div][/div]
[div class="header introContent"][font=Comfortaa][div=color:var(--tab-color-2); display:inline]Intro[/div][color=white]duction[/color][/font]
[/div][/div][/div][div class="spoke requestsSpoke"][div class=contentContainer]
[div class="content requestsContent"][div class=scroll][font=Open Sans]


Requests content



[/font][/div][/div]
[div class="header requestsContent"][font=Comfortaa][div=color:var(--tab-color-3); display:inline]Re[/div][color=white]quests[/color][/font]
[/div][/div][/div][div class="spoke bbcodeSpoke"][div class=contentContainer]
[div class="content bbcodeContent"][div class=scroll][font=Open Sans]

BBcode Content


[/font][/div][/div]
[div class="header bbcodeHeader"][font=Comfortaa][div=color:var(--tab-color-4); display:inline]List[/div][color=white] of BBcode[/color][/font]
[/div][/div]
[/div][/div][div class=circle][font=Comfortaa]
[div class=circleClose][fa]fa-times fa-fw[/fa][u]Close[/u][/div]
[div class=circleOpen][fa]fa-plus fa-fw[/fa][u]Open[/u][/div]
[/font][/div][/div][nobr]

[comment]Prepare for 36 different classes, several servings of spaghetti code, and lots of mindbreaking mathematics due to CSS documentation, all brought to you by Alteras!!!![/comment]

[class=container]
--img-w: 2100;
--img-h: 1200;
--cir-center-h: 61.08%;
--cir-center-w: 26.86%;
--cir-radius: 12.7;
--cir-thickness: .5vw;
--bg-color: rgba(191, 217, 242, 0.9);
--divide-thick: .25vw;
--tab-color-1:#eab040;
--tab-color-2:#32254b;
--tab-color-3:#8F5465;
--tab-color-4:#7582C4;
color:gray;
width: 100%;
padding-top: calc( var(--img-h) / var(--img-w) * 100%);
background-image:url('https://www.rpnation.com/media/cache_e28c5ac3-dd5a-432b-c35b-33c516ed1b73-png.33740/full');
background-size:contain;
position:relative;
overflow:hidden;
[/class]

[class=glaze]
--cir-radius-math: calc( var(--cir-radius) / 100 * 100%);
width: 100%;
padding-top: calc( var(--img-h) / var(--img-w) * 100%);
background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness)));
position: absolute;
top:0;
clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out;
[/class]

[class=glazeOpen]
clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s;
[/class]

[comment]Start of Tabs Selection[/comment]

[class=tabsContainer]
z-index:10;
position: absolute;
width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) );
height: calc( 2vw + 6px);
top: calc( var(--cir-center-h) - var(--divide-thick) / 2 );
left: 0;
border-top: var(--divide-thick) solid white;
[/class]

[class=tabNames]
width: 100%;
height: auto;
bottom: calc( 100% + var(--divide-thick) );
position: absolute;
[/class]

[class=tabName]
width: 100%;
height: auto;
box-sizing: border-box;
position: absolute;
bottom:0;
font-size: calc(1.25vw + 6px);
text-align: center;
opacity:0;
transition: opacity .5s ease-in;
[/class]

[class=tabNameShow]
opacity: 1;
[/class]

[class=tabs]
width: 100%;
height: 100%;
display: flex;
flew-flow: row nowrap;
justify-content: space-around;
font-size: calc(1.25vw + 6px);
[/class]

[class=tab]
flex: 1 1 auto;
text-align: center;
cursor: pointer;
[/class]

[class=titletab]
color: var(--tab-color-1);
transition: all .5s ease-in;
[/class]

[class name=titletab state=hover]
color: white;
background-color: var(--tab-color-1);
[/class]

[class=titleName]
color: var(--tab-color-1);
transition: opacity .5s ease-in;
[/class]

[script class=titletab on=mouseenter]
addClass tabNameShow titleName
[/script]

[script class=titletab on=mouseleave]
removeClass tabNameShow titleName
[/script]

[class=introtab]
color: var(--tab-color-2);
transition: all .5s ease-in;
[/class]

[class name=introtab state=hover]
color: white;
background-color: var(--tab-color-2);
[/class]

[class=introName]
color: var(--tab-color-2);
[/class]

[script class=introtab on=mouseenter]
addClass tabNameShow introName
[/script]

[script class=introtab on=mouseleave]
removeClass tabNameShow introName
[/script]

[class=requeststab]
color: var(--tab-color-3);
transition: all .5s ease-in;
[/class]

[class name=requeststab state=hover]
color: white;
background-color: var(--tab-color-3);
[/class]

[class=requestsName]
color: var(--tab-color-3);
[/class]

[script class=requeststab on=mouseenter]
addClass tabNameShow requestsName
[/script]

[script class=requeststab on=mouseleave]
removeClass tabNameShow requestsName
[/script]

[class=bbcodetab]
color: var(--tab-color-4);
transition: all .5s ease-in;
[/class]

[class name=bbcodetab state=hover]
color: white;
background-color: var(--tab-color-4);
[/class]

[class=bbcodeName]
color: var(--tab-color-4);
[/class]

[script class=bbcodetab on=mouseenter]
addClass tabNameShow bbcodeName
[/script]

[script class=bbcodetab on=mouseleave]
removeClass tabNameShow bbcodeName
[/script]

[comment]End of Tabs Selection[/comment]

[class=spoke]
--math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) );
position: absolute;
height: 100%;
width: 100%;
bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 );
left: var(--math);
border-bottom: var(--divide-thick) white solid;
transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom;
transform: rotate(-270deg);
opacity: 0;
transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s;
[/class]

[class=SpokeReveal]
transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s;
transform: rotate(0deg);
opacity: 1;
[/class]

[class=contentContainer]
height: 100%;
width: calc( 100% - var(--math) );
left:0;
position:relative;
[/class]

[class=content]
width: calc( 100% - 5px);
height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px);
max-height:0;
bottom: 0;
left:0;
overflow: hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]

[class=scroll]
height: auto;
max-height: 100%;
padding-top: 15px;
width: calc( 100%);
bottom: 0;
position: absolute;
padding-right: 200px;
overflow-y: scroll;
[/class]

[class=header]
width: 100%;
height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2);
max-height:0;
top: calc(100% + var(--divide-thick) );
line-height: .9;
font-size: calc( 5.5vw + 2px );
overflow:hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]

[comment]Title Screen[/comment]
[class=Title]
height: auto;
left:0;
bottom: 0;
position: absolute;
color: white;
font-size: calc( 5.5vw + 8px );
line-height:.9;
[/class]

[class=caption]
width:100%;
height: 4vw;
font-size: calc( 1.75vw + 6px );
line-height: 1.2;
position: absolute;
[/class]
[comment]End title screen[/comment]

[class=ShowContent]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[class=ShowHeader]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[class=circle]
width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) );
height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness));
box-sizing: border-box;
border-radius: 50%;
top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) );
left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) );
right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) );
position: absolute;
cursor: pointer;
border: 0px white solid;
transition: border-width .5s ease-in-out 1s;
[/class]

[class=circleReveal]
transition: border-width .5s ease-in-out;
border-width: calc(var(--cir-thickness) + 2px);
[/class]

[class=circleClose]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpen]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpacity]
opacity:1;
[/class]

[script=circle]
set isOpen 1
addClass circleReveal circle
addClass glazeOpen glaze
[/script]

[script class=circle on=mouseenter]
if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen)
[/script]

[script class=circle on=mouseleave]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
[/script]

[script class=circle on=click]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
if (eq ${isOpen} 1) (removeClass glazeOpen glaze)
if (eq ${isOpen} 1) (removeClass circleReveal circle)
if (eq ${isOpen} 0) (addClass glazeOpen glaze)
if (eq ${isOpen} 0) (addClass circleReveal circle)
if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1)
[/script]

[script=tab]
set TabSel 0
set TabHis 1
addClass ShowContent titleContent
addClass ShowHeader titleHeader
addClass SpokeReveal titleSpoke
[/script]

[script class=tab on=click]
set TabSel (getText)
if (eq ${TabSel} ${TabHis}) (stop)
//if tab selected is current tab, stop.
if (eq ${TabHis} 1) (removeClass ShowContent titleContent)
if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader)
if (eq ${TabHis} 2) (removeClass ShowContent introContent)
if (eq ${TabHis} 2) (removeClass ShowHeader introHeader)
if (eq ${TabHis} 3) (removeClass ShowContent requestsContent)
if (eq ${TabHis} 3) (removeClass ShowHeader requestsHeader)
if (eq ${TabHis} 4) (removeClass ShowContent bbcodeContent)
if (eq ${TabHis} 4) (removeClass ShowHeader bbcodeHeader)

//hide the text and prepare for SPINNING 
if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke)
if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke)
if (eq ${TabHis} 3) (removeClass SpokeReveal requestsSpoke)
if (eq ${TabHis} 4) (removeClass SpokeReveal bbcodeSpoke)

//spinning to hide spoke complete. Prepare to spin spoke into view
if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke)
if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke)
if (eq ${TabSel} 3) (addClass SpokeReveal requestsSpoke)
if (eq ${TabSel} 4) (addClass SpokeReveal bbcodeSpoke)

//spinning complete. Show the new stuff
if (eq ${TabSel} 1) (addClass ShowContent titleContent)
if (eq ${TabSel} 1) (addClass ShowHeader titleHeader)
if (eq ${TabSel} 2) (addClass ShowContent introContent)
if (eq ${TabSel} 2) (addClass ShowHeader introHeader)
if (eq ${TabSel} 3) (addClass ShowContent requestsContent)
if (eq ${TabSel} 3) (addClass ShowHeader requestsHeader)
if (eq ${TabSel} 4) (addClass ShowContent bbcodeContent)
if (eq ${TabSel} 4) (addClass ShowHeader bbcodeHeader)
set TabHis ${TabSel}
[/script]
[comment]Coded by @Alteras[/comment]
[/nobr]
Circular RevealFrom here on out, I'll be explaining the different animated parts of the code, starting with how it does a circular reveal (initial load in/pressing the star). This is by far the easiest out of all of them. There are two parts to this, on hover, display the correct message, and on click, do the correct action.
Code:
[class=glaze]
--cir-radius-math: calc( var(--cir-radius) / 100 * 100%);
width: 100%;
padding-top: calc( var(--img-h) / var(--img-w) * 100%);
background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness)));
position: absolute;
top:0;
clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out;
[/class]

[class=glazeOpen]
clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
-webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) );
transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s;
[/class]

[class=circle]
width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) );
height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness));
box-sizing: border-box;
border-radius: 50%;
top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) );
left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) );
right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) );
position: absolute;
cursor: pointer;
border: 0px white solid;
transition: border-width .5s ease-in-out 1s;
[/class]

[class=circleReveal]
transition: border-width .5s ease-in-out;
border-width: calc(var(--cir-thickness) + 2px);
[/class]

[class=circleClose]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpen]
text-align: center;
color: gray;
top: 50%;
left: 50%;
font-size: calc( 1vw + 6px);
transform: translateX(-50%) translateY(-50%);
position: absolute;
opacity: 0;
transition: opacity .2s ease-in-out;
[/class]

[class=circleOpacity]
opacity:1;
[/class]

[script=circle]
set isOpen 1
addClass circleReveal circle
addClass glazeOpen glaze
[/script]

[script class=circle on=mouseenter]
if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen)
[/script]

[script class=circle on=mouseleave]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
[/script]

[script class=circle on=click]
removeClass circleOpacity circleClose
removeClass circleOpacity circleOpen
if (eq ${isOpen} 1) (removeClass glazeOpen glaze)
if (eq ${isOpen} 1) (removeClass circleReveal circle)
if (eq ${isOpen} 0) (addClass glazeOpen glaze)
if (eq ${isOpen} 0) (addClass circleReveal circle)
if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1)
[/script]
The Glaze is the blue background and container that holds the entire content post. Controlling what parts of it gets displayed is what controls what entire sections of the post gets displayed. The circle is an extra circular div the floats above the star over everything else inside the Glaze. This is where the "Close" and "Open" text gets displayed and serves as the button to press. Because we need it to decide between two texts to display on hover, we cannot use the class state=hover, but create a hover using BBscript. When mouse enters it, it checks to see if the post has already been revealed or not, and displays the text by adding a simple opacity class to it. When the mouse leaves, it removes the class from both options. This could've been easily done with fadeIn and fadeOut, but I wanted to avoid having to use it this time.

When the circle is clicked on, it'll remove the opacity classes and add or remove glazeOpen and circleReveal. circleReveal is a class to make the circle border appear and disappear. glazeOpen is a class containing clip-path with expansion to 100%. This clip-path is what makes it cut a circle around the content. On default, the Glaze has the clip-path set to only the size of the star, so glazeOpen is added to reveal it. For the animation to occur on load in, it is simply added in on a standalone script without any triggers. glazeOpen has a delay on its transition, making it wait until circleReveal is finished transitioning before revealing everything. After all this, it'll set a variable to say that it has been opened or closed, which will be used next time the star is clicked to determine what to do.

Tab SelectionThere are effectively three systems that work together, a way to select the tabs, a way to spin the tabs in, and a way to reveal the text. This constitutes the majority of the code and all operates at the same time at the press of a button. We'll start with tab selection. This is a simple click on one of a set of 4 tabs. Hovering over one of them will display the tab name above the line and clicking them will commence the rest of the code needed to display the selected tabs. Because of how many parts there are to it, it was coded to apply only needed classes to avoid messing up the transition. Thankfully, even if something went horribly wrong, CSS transition is robust enough to be able to change on the fly.
Code:
[comment]Start of Tabs Selection[/comment]

[class=tabsContainer]
z-index:10;
position: absolute;
width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) );
height: calc( 2vw + 6px);
top: calc( var(--cir-center-h) - var(--divide-thick) / 2 );
left: 0;
border-top: var(--divide-thick) solid white;
[/class]

[class=tabNames]
width: 100%;
height: auto;
bottom: calc( 100% + var(--divide-thick) );
position: absolute;
[/class]

[class=tabName]
width: 100%;
height: auto;
box-sizing: border-box;
position: absolute;
bottom:0;
font-size: calc(1.25vw + 6px);
text-align: center;
opacity:0;
transition: opacity .5s ease-in;
[/class]

[class=tabNameShow]
opacity: 1;
[/class]

[class=tabs]
width: 100%;
height: 100%;
display: flex;
flew-flow: row nowrap;
justify-content: space-around;
font-size: calc(1.25vw + 6px);
[/class]

[class=tab]
flex: 1 1 auto;
text-align: center;
cursor: pointer;
[/class]

[class=titletab]
color: var(--tab-color-1);
transition: all .5s ease-in;
[/class]

[class name=titletab state=hover]
color: white;
background-color: var(--tab-color-1);
[/class]

[class=titleName]
color: var(--tab-color-1);
transition: opacity .5s ease-in;
[/class]

[script class=titletab on=mouseenter]
addClass tabNameShow titleName
[/script]

[script class=titletab on=mouseleave]
removeClass tabNameShow titleName
[/script]

[class=introtab]
color: var(--tab-color-2);
transition: all .5s ease-in;
[/class]

[class name=introtab state=hover]
color: white;
background-color: var(--tab-color-2);
[/class]

[class=introName]
color: var(--tab-color-2);
[/class]

[script class=introtab on=mouseenter]
addClass tabNameShow introName
[/script]

[script class=introtab on=mouseleave]
removeClass tabNameShow introName
[/script]

[class=requeststab]
color: var(--tab-color-3);
transition: all .5s ease-in;
[/class]

[class name=requeststab state=hover]
color: white;
background-color: var(--tab-color-3);
[/class]

[class=requestsName]
color: var(--tab-color-3);
[/class]

[script class=requeststab on=mouseenter]
addClass tabNameShow requestsName
[/script]

[script class=requeststab on=mouseleave]
removeClass tabNameShow requestsName
[/script]

[class=bbcodetab]
color: var(--tab-color-4);
transition: all .5s ease-in;
[/class]

[class name=bbcodetab state=hover]
color: white;
background-color: var(--tab-color-4);
[/class]

[class=bbcodeName]
color: var(--tab-color-4);
[/class]

[script class=bbcodetab on=mouseenter]
addClass tabNameShow bbcodeName
[/script]

[script class=bbcodetab on=mouseleave]
removeClass tabNameShow bbcodeName
[/script]

[comment]End of Tabs Selection[/comment]
For each tab, when you hover over it, it'll change the background color and text color. At the same time, when you move the mouse into the tab, it'll display the tab name. When the mouse leaves, it'll hide the tab name. This could've easily been doing using some crafty hover and divs, but to avoid messing with margins and sizing and to make it easier to do deal with on any screen size, I decided to just use BBscript.
Code:
[script class=tab on=click]
set TabSel (getText)
if (eq ${TabSel} ${TabHis}) (stop)
//if tab selected is current tab, stop.
set TabHis ${TabSel}
//if set tab selected to tab history.
[/script]
This is pretty much all there is to selecting the tab. Of course there is a lot of code in between that details how to make the tabs actually show up, but just for selecting the tab, this is all. It'll stop if the tab selected is already open. This is to prevent it from doing extra work and eliminating the possibility of things spinning when it shouldn't.

Spinning the TabsInside the tab selection is a series of if statements containing addClass and removeClass functions. The classes that get added dictate whether the tab (called the spoke for it semblance to the spokes on a wheel) is rotated into view or rotated out of view. They also contain an opacity transition with a delay to only be visible when its closest to being in view.
Code:
[class=spoke]
--math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) );
position: absolute;
height: 100%;
width: 100%;
bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 );
left: var(--math);
border-bottom: var(--divide-thick) white solid;
transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom;
transform: rotate(-270deg);
opacity: 0;
transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s;
[/class]

[class=SpokeReveal]
transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s;
transform: rotate(0deg);
opacity: 1;
[/class]

[script class=tab on=click]
set TabSel (getText)
if (eq ${TabSel} ${TabHis}) (stop)
//if tab selected is current tab, stop.

//hide the text and prepare for SPINNING 
if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke)
if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke)
if (eq ${TabHis} 3) (removeClass SpokeReveal requestsSpoke)
if (eq ${TabHis} 4) (removeClass SpokeReveal bbcodeSpoke)

//spinning to hide spoke complete. Prepare to spin spoke into view
if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke)
if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke)
if (eq ${TabSel} 3) (addClass SpokeReveal requestsSpoke)
if (eq ${TabSel} 4) (addClass SpokeReveal bbcodeSpoke)
set TabHis ${TabSel}
[script][code][spoiler]
As you can see, it rotates from 0 degrees to -270 degrees, and vice versa, both at the same time for the already opened tab and selected tab. As stated before, to avoid it from doing unexpected things, it uses if statements and only applies the removeClass to the tab that is already opened instead of applying it to all.
[divide=thick]Revealing the Text[/divide]
Before and after it spins the spokes in, it hides and reveals the text respectively. This is also done using addClass and removeClass to achieve the slide up and slide down effects. It couldn't be achieved using the BBscript slideUp since that just hides it.
[spoiler=Code for Hiding and Revealing Text][code][class=content]
width: calc( 100% - 5px);
height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px);
max-height:0;
bottom: 0;
left:0;
overflow: hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]

[class=header]
width: 100%;
height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2);
max-height:0;
top: calc(100% + var(--divide-thick) );
line-height: .9;
font-size: calc( 5.5vw + 2px );
overflow:hidden;
position: absolute;
transition: max-height 1.5s ease-in-out;
[/class]

[class=ShowContent]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[class=ShowHeader]
max-height: 75vh;
transition: max-height 1.5s ease-in-out 3.25s;
[/class]

[script class=tab on=click]
set TabSel (getText)
if (eq ${TabSel} ${TabHis}) (stop)
//if tab selected is current tab, stop.
if (eq ${TabHis} 1) (removeClass ShowContent titleContent)
if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader)
if (eq ${TabHis} 2) (removeClass ShowContent introContent)
if (eq ${TabHis} 2) (removeClass ShowHeader introHeader)
if (eq ${TabHis} 3) (removeClass ShowContent requestsContent)
if (eq ${TabHis} 3) (removeClass ShowHeader requestsHeader)
if (eq ${TabHis} 4) (removeClass ShowContent bbcodeContent)
if (eq ${TabHis} 4) (removeClass ShowHeader bbcodeHeader)

//hide the text and prepare for SPINNING 
if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke)
if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke)
if (eq ${TabHis} 3) (removeClass SpokeReveal requestsSpoke)
if (eq ${TabHis} 4) (removeClass SpokeReveal bbcodeSpoke)

//spinning to hide spoke complete. Prepare to spin spoke into view
if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke)
if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke)
if (eq ${TabSel} 3) (addClass SpokeReveal requestsSpoke)
if (eq ${TabSel} 4) (addClass SpokeReveal bbcodeSpoke)

//spinning complete. Show the new stuff
if (eq ${TabSel} 1) (addClass ShowContent titleContent)
if (eq ${TabSel} 1) (addClass ShowHeader titleHeader)
if (eq ${TabSel} 2) (addClass ShowContent introContent)
if (eq ${TabSel} 2) (addClass ShowHeader introHeader)
if (eq ${TabSel} 3) (addClass ShowContent requestsContent)
if (eq ${TabSel} 3) (addClass ShowHeader requestsHeader)
if (eq ${TabSel} 4) (addClass ShowContent bbcodeContent)
if (eq ${TabSel} 4) (addClass ShowHeader bbcodeHeader)
set TabHis ${TabSel}
[/script]
Usually, we would just transition height, but we had to use max-height instead since webkit doesn't transition a height from 0 to auto. It would simply add or remove the max-height: 75vh to get around that. Ahh, because everything in BBscript is done instantaneously, all the transitions have a delay that makes sure they don't all occur at the same time. The delays are different for whether the class is added or removed.

Making it all happen on load inTo get that nice load in effect of the circle revealing, the spokes rotating, and the text appearing, all we have to do is add a small script that occurs immediately without any user actions.
Code:
[script=circle]
set isOpen 1
addClass circleReveal circle
addClass glazeOpen glaze
[/script]

[script=tab]
set TabSel 0
set TabHis 1
addClass ShowContent titleContent
addClass ShowHeader titleHeader
addClass SpokeReveal titleSpoke
[/script]
It is set to make the title come in, and we simply reuse the classes for revealing everything since they have just enough delay to move in the middle of the circular reveal. It also sets up our variables for keeping track of whether the circle is opened, the tab is selected, and if there is a previous tab already selected.

Closing ThoughtsThis was a pretty fun project to work on, even if it was suppose to just be an intro post to this thread. Although there are some minor browser bugs (curse ye webkit!!), it is quite satisfying. The code is available for use there. While I only covered how the system works, there are smaller things that can easily take up an entire post, stuff like how it maintains its mobile friendliness, how the math for the circles and everything around it works, and how headers are sized. Unfortunately I didn't explain how to make these animations (you'll just have to wait for my other guide for that!), but I hope that this explains how it uses BBcode+ and BBscript to achieve its effects.
 

JayeTheKat

Elder Member
Alteras Alteras - I'm gonna do something I don't normally do. I'm going to post a compliment and break my silent watching streak. Here goes: You are quite literally amazing. I have no other explanation for this. Even before BBcode+, your codes have always been some of the most amazing ones I've seen here on RpN. I love it! I also love your writing, it's amazing to. You're amazing! Kay, I think that about sums it up, so... yeah! Amazing!
 

Alteras

The Sleepy One
Moderator
Supporter
[nobr]

[class=container]
width: 100%;
padding-top: calc( (3 / 7) * 100%);
position: relative;
--color-1: rgb(236, 225, 147);
--bg-color-1: rgb(59, 45, 44);
--bg-color-2: rgb(186,78,81);
--bg-color-3: rgb(223, 203, 180);
[/class]

[class=colorC]
--color-1: rgb(149, 112, 87);
[/class]

[class=flex]
width: 100%;
height: 100%;
position: absolute;
top:0;
display: flex;
flex-flow: row wrap;
align-items: stretch;
[/class]

[class=imageholder]
width: calc( 3 / 7 * 100%);
height: 100%;
box-sizing:border-box;
position: relative;
transform-style: preserve-3d;
flex: 0 0 auto;
font-size:0;
[/class]

[class=rightside]
flex: 1 0 auto;
position: relative;
[/class]

[class=tabholder]
position: absolute;
max-height: 5%;
height: auto;
bottom: 70%;
left: -5%;
border: 3px solid var(--color-1);
border-bottom-width: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 3px 10px 3px 10px;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
color: var(--color-1);
transition: color 3s, border-color 3s;
white-space: nowrap;
[/class]

[class=button]
display: inline;
cursor: pointer;
[/class]

[class=content]
width: 100%;
height: 65%;
left:-5%;
bottom: 5%;
position: absolute;
[/class]

[class=contentHolder]
position: relative;
width: 100%;
height: 100%;
border-top: 3px solid var(--color-1);
border-bottom: 3px solid var(--color-1);
color: var(--color-1);
transition: color 3s, border-color 3s;
padding-top: 3px;
overflow:hidden;
transform-style: preserve-3D;
box-sizing: border-box;
[/class]

[class=contentBox]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s;
[/class]

[class=contentFix]
position: relative;
height: 100%;
width: 100%;
overflow-Y: scroll;
padding-right: 100px;
[/class]

[class=contentSpin]
-webkit-transform: rotateY(.5turn);
transform: rotateY(.5turn);
[/class]


[class=backgroundContainer]
display: flex;
position: absolute;
width: 100%;
height: 100%;
top:0;
transform: translateZ(-1000px);
[/class]

[class=backgroundPanel]
flex-grow: 1;
height: 100%;
position: relative;
[/class]

[class=PanelA]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-1);
[/class]

[class=PanelB]
height:100%;
width: 100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-2);
[/class]

[class=PanelC]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-3);
[/class]

[class=panelSpin]
transform: rotateY(.5turn);
[/class]





[class=HeartsContainer]
width: 100%;
height: 25%;
position: relative;
[/class]

[class=heart]
transition: all 3s ease-out;
display: block;
position: absolute;
width: auto;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
[/class]

[class=heartImage]
right: 10%;
top: 20%;
z-index: 9;
color: rgb(255, 229, 238);
[/class]

[class=heart1]
top: 50%;
left: 0%;
color: rgb(233, 128, 140);
[/class]

[class=heart2]
top: 20%;
left: 15%;
color: rgb(239, 69, 87);
[/class]

[class=heart3]
bottom: 10%;
left: 40%;
color: rgb(241, 100, 143);
[/class]

[class=heart4]
top: 40%;
left: 60%;
color: rgb(248, 173, 183);
[/class]

[class=heart5]
bottom: 30%;
right: 10%;
color: rgb(227, 47, 108);
[/class]

[class=heartTab1]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab2]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab3]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=spin]
transform: rotateY(5turn);
[/class]

[class=spinHeartImage]
transition: transform 3s ease-out;
[/class]

[class=spinHeart1]
transition: transform 3s ease-out .25s;
[/class]

[class=spinHeart2]
transition: transform 3s ease-out .5s;
[/class]

[class=spinHeart3]
transition: transform 3s ease-out .75s;
[/class]

[class=spinHeart4]
transition: transform 3s ease-out 1s;
[/class]

[class=spinHeart5]
transition: transform 3s ease-out 1.25s;
[/class]

[class=spinHeartTab1]
transition: transform 3s ease-out .275s;
[/class]

[class=spinHeartTab2]
transition: transform 3s ease-out .525s;
[/class]

[class=spinHeartTab3]
transition: transform 3s ease-out .775s;
[/class]

[script=heart]
set heartImageIsSpun 0
set heart1IsSpun 0
set heart2IsSpun 0
set heart3IsSpun 0
set heart4IsSpun 0
set heart5IsSpun 0
set heartTab1IsSpun 0
set heartTab2IsSpun 0
set heartTab3IsSpun 0
[/script]

[script class=heartImage on=mouseenter]
removeClass spinHeartImage
if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
[/script]

[script class=heart1 on=mouseenter]
removeClass spinHeart1
if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
[/script]

[script class=heart2 on=mouseenter]
removeClass spinHeart2
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
[/script]

[script class=heart3 on=mouseenter]
removeClass spinHeart3
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
[/script]

[script class=heart4 on=mouseenter]
removeClass spinHeart4
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
[/script]

[script class=heart5 on=mouseenter]
removeClass spinHeart5
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
[/script]

[script class=heartTab1 on=mouseenter]
removeClass spinHeartTab1
if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
[/script]

[script class=heartTab2 on=mouseenter]
removeClass spinHeartTab2
if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
[/script]

[script class=heartTab3 on=mouseenter]
removeClass spinHeartTab3
if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]





[class=imageSideA]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideB]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideC]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=spinImage]
transform: rotateY(1.5turn);
[/class]

[script=button]
set CurSide A
fadeOut 1 contentB
fadeOut 1 contentC
[/script]

[script class=buttonA on=click]
if (eq ${CurSide} A) (stop)
fadeIn 3000 contentA
fadeOut 3000 contentB
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentA
addClass contentSpin contentB
addClass contentSpin contentC
removeClass panelSpin PanelA
addClass panelSpin PanelB
addClass panelSpin PanelC
removeClass spinImage imageSideA
addClass spinImage imageSideB
addClass spinImage imageSideC
set CurSide A

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonB on=click]
if (eq ${CurSide} B) (stop)
fadeIn 3000 contentB
fadeOut 3000 contentA
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentB
addClass contentSpin contentA
addClass contentSpin contentC
removeClass panelSpin PanelB
addClass panelSpin PanelA
addClass panelSpin PanelC
removeClass spinImage imageSideB
addClass spinImage imageSideA
addClass spinImage imageSideC
set CurSide B

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonC on=click]
if (eq ${CurSide} C) (stop)
addClass colorC container
fadeIn 3000 contentC
fadeOut 3000 contentA
fadeOut 3000 contentB
removeClass contentSpin contentC
addClass contentSpin contentB
addClass contentSpin contentA
removeClass panelSpin PanelC
addClass panelSpin PanelB
addClass panelSpin PanelA
removeClass spinImage imageSideC
addClass spinImage imageSideB
addClass spinImage imageSideA
set CurSide C

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]





[/nobr][div class=container][div class=backgroundContainer][nobr]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div]
[/nobr][/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][/div][div class=imageSideA] [/div][div class="imageSideB spinImage"] [/div][div class="imageSideC spinImage"] [/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][/div]
[div class="heart heart2"][/div]
[div class="heart heart3"][/div]
[div class="heart heart4"][/div]
[div class="heart heart5"][/div][/div][div class=tabholder][div class="buttonA button"][div class=heartTab1][/div]Milk[/div] | [div class="buttonB button"][div class=heartTab2][/div]Strawberry[/div] | [div class="buttonC button"][div class=heartTab3][/div]White[/div][/div][div class=content][div=position:absolute; top:100%; right:0; font: .75em "Fugaz One"; color: var(--color-1); transition: color 3s;]Code by Alteras Alteras [/div][div class=contentHolder]

[div class="contentBox contentA"][div=font-size: calc( 4px + (18 - 4) * (100vh - 200px) / (1280 - 200) );][div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"][div=position:absolute; top:0; font: 3.5em "Fugaz One";]Chocolate[/div][div=font-size:9em; display: block; position:absolute; top:0; width: calc(100% - 100px); height:2em; line-height: .95; font-family:"Fugaz One"; transform: skewY(-10deg); transform-origin: top right;]
Angela
Akiyama
[/div]
[div=position:absolute; bottom:0; right: 100px; font: 3.5em "Fugaz One";]Romance[/div][/div]
[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Name: Angela Akiyama
Age: 16
Gender: Female
Year: 2nd Year
Class: 2-A
Height: 160cm
Weight: Not telling! >_<

Nicknames:
Chocolate Lover
Pink Librarian

Family:
Father - Ryo Akiyama
Mother - Emily Lee
Younger Brother - Austin Akiyama

Traits:
Shy
Cheerful
Caring

Hobbies:
Reading Romance Novels
Shopping for Chocolate (Meiji Brand!)
Creating Confections

Clubs:
Book Club
Confectionery Cooks Club

Relationships:
None

Crushes?:
A Secret!!!!

Favorite Song:

[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Often found hiding among her books or whipping up another batch of chocolate goodness, Angela Akiyama is the innocent darling of Class 2-A. With her adorably round face and small figure, she carries bars of Meiji chocolate everywhere she goes, smiling cheerful and quiet smile to many folks. In her neighborhood, she is always greeted warmly by the shopkeepers and housewives. On her way to school, she always stops by the candy store just to buy some bars, always kept in reserved by the friendly shopkeeper with a large belly.

In her school, almost everyone in the 2nd year knows Angela, either as the Chocolate Lover or the Pink Librarian, sometimes both depending on what she's carrying. She often gives out her chocolate gifts, putting some love in everyone's day. Each time, her confections taste better and better. Many believe that she's practicing her cooking for a crush that she has, but she won't admit it. In the library and during lunch, she's always reading light romance novels, filling her heart with lovely softness. Her favorite one is a small novella titled "The Exiled Princess and the Knight of Arcadia," a tale of a knights journey to find and protect the princess of a fallen kingdom. In her clubs, she is always cheerful, giving out gifts to fellow members. Many have tried to join her clubs just to eat the chocolate, of course this led to a strict application process imposed by her seniors, but they don't mind.

At home, her family cares deeply for her. She is always taking up the kitchen with bowls of chocolate while her younger brother steal fingerdips of each batch. Her parent sometimes worry about her and her quiet nature, but are happy that she is treated well at school. She's been given free use of the kitchen as long as she maintains her grades, so when night comes around, she's always in her room studying. Although once in a while, she might be rolling around in bed smothering her red face into a pillow.

[/div][/div]

[/div][/div][/div][/div][/div]
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
Chocolate Romance

Submission for BBcode Games Valentine's Day Prompt. This is the final version of the code. I honestly didn't think I could create this kind of code in less than a week. It was frustratingly fun getting the spins to work properly. Much more so with Chrome's weird way of rendering. When you move your cursor past a heart, it'll spin, and when you change tabs, it'll spin everything including the background. The colors were picked out of the images, which all happened to be pastel colored. The background color and the text color are the colors on a Meiji Chocolate Bar wrapper. This specific code is designed for a square image but any image size will work here. Here is the code. It is free to use, just don't remove the credit.
Code:
[nobr]

[class=container]
width: 100%;
padding-top: calc( (3 / 7) * 100%);
position: relative;
--color-1: rgb(236, 225, 147);
--bg-color-1: rgb(59, 45, 44);
--bg-color-2: rgb(186,78,81);
--bg-color-3: rgb(223, 203, 180);
[/class]

[class=colorC]
--color-1: rgb(149, 112, 87);
[/class]

[class=flex]
width: 100%;
height: 100%;
position: absolute;
top:0;
display: flex;
flex-flow: row wrap;
align-items: stretch;
[/class]

[class=imageholder]
width: calc( 3 / 7 * 100%);
height: 100%;
box-sizing:border-box;
position: relative;
transform-style: preserve-3d;
flex: 0 0 auto;
[/class]

[class=rightside]
flex: 1 0 auto;
position: relative;
[/class]

[class=tabholder]
position: absolute;
max-height: 5%;
height: auto;
bottom: 70%;
left: -5%;
border: 3px solid var(--color-1);
border-bottom-width: 0px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 3px 10px 3px 10px;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
color: var(--color-1);
transition: color 3s, border-color 3s;
white-space: nowrap;
[/class]

[class=button]
display: inline;
cursor: pointer;
[/class]

[class=content]
width: 100%;
height: 65%;
left:-5%;
bottom: 5%;
position: absolute;
[/class]

[class=contentHolder]
position: relative;
width: 100%;
height: 100%;
border-top: 3px solid var(--color-1);
border-bottom: 3px solid var(--color-1);
color: var(--color-1);
transition: color 3s, border-color 3s;
padding-top: 3px;
overflow:hidden;
transform-style: preserve-3D;
box-sizing: border-box;
[/class]

[class=contentBox]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s;
[/class]

[class=contentFix]
position: relative;
height: 100%;
width: 100%;
overflow-Y: scroll;
padding-right: 100px;
[/class]

[class=contentSpin]
-webkit-transform: rotateY(.5turn);
transform: rotateY(.5turn);
[/class]

[comment]Background Panels[/comment]
[class=backgroundContainer]
display: flex;
position: absolute;
width: 100%;
height: 100%;
top:0;
transform: translateZ(-1000px);
[/class]

[class=backgroundPanel]
flex-grow: 1;
height: 100%;
position: relative;
[/class]

[class=PanelA]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-1);
[/class]

[class=PanelB]
height:100%;
width: 100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-2);
[/class]

[class=PanelC]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-3);
[/class]

[class=panelSpin]
transform: rotateY(.5turn);
[/class]

[comment]Background Panels End[/comment]

[comment]Hearts Start[/comment]

[class=HeartsContainer]
width: 100%;
height: 25%;
position: relative;
[/class]

[class=heart]
transition: all 3s ease-out;
display: block;
position: absolute;
width: auto;
font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) );
[/class]

[class=heartImage]
right: 10%;
top: 20%;
z-index: 9;
color: rgb(255, 229, 238);
[/class]

[class=heart1]
top: 50%;
left: 0%;
color: rgb(233, 128, 140);
[/class]

[class=heart2]
top: 20%;
left: 15%;
color: rgb(239, 69, 87);
[/class]

[class=heart3]
bottom: 10%;
left: 40%;
color: rgb(241, 100, 143);
[/class]

[class=heart4]
top: 40%;
left: 60%;
color: rgb(248, 173, 183);
[/class]

[class=heart5]
bottom: 30%;
right: 10%;
color: rgb(227, 47, 108);
[/class]

[class=heartTab1]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab2]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=heartTab3]
display: inline;
position: absolute;
transition: 3s ease-out;
[/class]

[class=spin]
transform: rotateY(5turn);
[/class]

[class=spinHeartImage]
transition: transform 3s ease-out;
[/class]

[class=spinHeart1]
transition: transform 3s ease-out .25s;
[/class]

[class=spinHeart2]
transition: transform 3s ease-out .5s;
[/class]

[class=spinHeart3]
transition: transform 3s ease-out .75s;
[/class]

[class=spinHeart4]
transition: transform 3s ease-out 1s;
[/class]

[class=spinHeart5]
transition: transform 3s ease-out 1.25s;
[/class]

[class=spinHeartTab1]
transition: transform 3s ease-out .275s;
[/class]

[class=spinHeartTab2]
transition: transform 3s ease-out .525s;
[/class]

[class=spinHeartTab3]
transition: transform 3s ease-out .775s;
[/class]

[script=heart]
set heartImageIsSpun 0
set heart1IsSpun 0
set heart2IsSpun 0
set heart3IsSpun 0
set heart4IsSpun 0
set heart5IsSpun 0
set heartTab1IsSpun 0
set heartTab2IsSpun 0
set heartTab3IsSpun 0
[/script]

[script class=heartImage on=mouseenter]
removeClass spinHeartImage
if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
[/script]

[script class=heart1 on=mouseenter]
removeClass spinHeart1
if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
[/script]

[script class=heart2 on=mouseenter]
removeClass spinHeart2
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
[/script]

[script class=heart3 on=mouseenter]
removeClass spinHeart3
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
[/script]

[script class=heart4 on=mouseenter]
removeClass spinHeart4
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
[/script]

[script class=heart5 on=mouseenter]
removeClass spinHeart5
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
[/script]

[script class=heartTab1 on=mouseenter]
removeClass spinHeartTab1
if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
[/script]

[script class=heartTab2 on=mouseenter]
removeClass spinHeartTab2
if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
[/script]

[script class=heartTab3 on=mouseenter]
removeClass spinHeartTab3
if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[comment]Hearts end[/comment]

[comment]Image start[/comment]

[class=imageSideA]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideB]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=imageSideC]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=spinImage]
transform: rotateY(1.5turn);
[/class]

[script=button]
set CurSide A
fadeOut 1 contentB
fadeOut 1 contentC
[/script]

[script class=buttonA on=click]
if (eq ${CurSide} A) (stop)
fadeIn 3000 contentA
fadeOut 3000 contentB
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentA
addClass contentSpin contentB
addClass contentSpin contentC
removeClass panelSpin PanelA
addClass panelSpin PanelB
addClass panelSpin PanelC
removeClass spinImage imageSideA
addClass spinImage imageSideB
addClass spinImage imageSideC
set CurSide A

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonB on=click]
if (eq ${CurSide} B) (stop)
fadeIn 3000 contentB
fadeOut 3000 contentA
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentB
addClass contentSpin contentA
addClass contentSpin contentC
removeClass panelSpin PanelB
addClass panelSpin PanelA
addClass panelSpin PanelC
removeClass spinImage imageSideB
addClass spinImage imageSideA
addClass spinImage imageSideC
set CurSide B

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[script class=buttonC on=click]
if (eq ${CurSide} C) (stop)
addClass colorC container
fadeIn 3000 contentC
fadeOut 3000 contentA
fadeOut 3000 contentB
removeClass contentSpin contentC
addClass contentSpin contentB
addClass contentSpin contentA
removeClass panelSpin PanelC
addClass panelSpin PanelB
addClass panelSpin PanelA
removeClass spinImage imageSideC
addClass spinImage imageSideB
addClass spinImage imageSideA
set CurSide C

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]

[comment]Image end[/comment]

[comment]Code by [USER=34809]@Alteras[/USER][/comment]

[/nobr][div class=container][div class=backgroundContainer][nobr]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div]
[div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div]
[/nobr][/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][fa]fa-heart fa-fw fa-2x[/fa][/div][div class=imageSideA][IMG]https://www.rpnation.com/media/f799306e12a6cde82ae34e3358cfb2fd-png.34757/full[/IMG][/div][div class="imageSideB spinImage"][IMG]https://www.rpnation.com/media/c6cee57a7a843813ea4d64a64f653c0a-png.34756/full[/IMG][/div][div class="imageSideC spinImage"][img]https://www.rpnation.com/media/__monaca_burlone_uchi_no_hime_sama_ga_ichiban_kawaii_drawn_by_sheska_xue__720295ec68da1750bad5-png.34758/full[/img][/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][fa]fa-heart fa-fw fa-2x[/fa][/div]
[div class="heart heart2"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart3"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart4"][fa]fa-heart fa-fw fa-4x[/fa][/div]
[div class="heart heart5"][fa]fa-heart fa-fw fa-5x[/fa][/div][/div][div class=tabholder][font=Fugaz One][div class="buttonA button"][div class=heartTab1][fa]fa-heartbeat fa-fw[/fa][/div][fa]fa-fw[/fa]Milk[/div] | [div class="buttonB button"][div class=heartTab2][fa]fa-heart fa-fw[/fa][/div][fa]fa-fw[/fa]Strawberry[/div] | [div class="buttonC button"][div class=heartTab3][fa]fa-heart-o fa-fw[/fa][/div][fa]fa-fw[/fa]White[/div][/font][/div][div class=content][div=position:absolute; top:100%; right:0; font: .75em "Fugaz One"; color: var(--color-1); transition: color 3s;]Code by [USER=34809]@Alteras[/USER][/div][div class=contentHolder][font=Montserrat]

[div class="contentBox contentA"][div=font-size: calc( 4px + (18 - 4) * (100vh - 200px) / (1280 - 200) );][div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"][div=position:absolute; top:0; font: 3.5em "Fugaz One";]Chocolate[/div][div=font-size:9em; display: block; position:absolute; top:0; width: calc(100% - 100px); height:2em; line-height: .95; font-family:"Fugaz One"; transform: skewY(-10deg); transform-origin: top right;][left][u]Angela[/u][/left]
[right][u]Akiyama[/u][/right][/div]
[div=position:absolute; bottom:0; right: 100px; font: 3.5em "Fugaz One";]Romance[/div][/div]
[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Tab 2 Content

[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Tab 3 Content

[/div][/div]

[/font][/div][/div][/div][/div][/div]
SpinningSo the main feature of this code is the fact that everything can spin. This is simply making use of the transform and transition property, in a class spin and a main class respectively.
Code:
transform: rotate( 0.5turn);
transition: transform 3s ease-out;
To make it so that it'll always turn when you move the mouse over it, I used bbscript to keep track whether or not the class was added:
Code:
[script class=heart1 on=mouseenter]
if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
[/script]
To make the image and background turn to reveal new images/color, I simply made three div and rotated them as needed. To keep them from displaying from the back, backface-visibility: hidden was added to each of them.
Code:
[class=imageSideA]
width: 100%;
position: absolute;
top:0;
transition: all 3s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
pointer-events:none;
[/class]

[class=PanelA]
height:100%;
width:100%;
position: absolute;
top:0;
left:0;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
background-color: var(--bg-color-1);
[/class]
The same thing was done for the text. The tough part was making everything spin when you change tabs. Of course I simply add the classes to each item, but they have to have different transition delays to get a nice knock-on effect. So by utilizing the fact that we can override properties, I added in a class with the correct timing to each heart and then added the spin class. To get it to spin normally without a tab change, I'd simply remove the classes with the delay when it gets hovered over.
Code:
[script=button]
set CurSide A
fadeOut 1 contentB
fadeOut 1 contentC
[/script]

[script class=buttonA on=click]
if (eq ${CurSide} A) (stop)
fadeIn 3000 contentA
fadeOut 3000 contentB
fadeOut 3000 contentC
removeClass colorC container
removeClass contentSpin contentA
addClass contentSpin contentB
addClass contentSpin contentC
removeClass panelSpin PanelA
addClass panelSpin PanelB
addClass panelSpin PanelC
removeClass spinImage imageSideA
addClass spinImage imageSideB
addClass spinImage imageSideC
set CurSide A

//spinning hearts
addClass spinHeartImage heartImage
addClass spinHeart1 heart1
addClass spinHeart2 heart2
addClass spinHeart3 heart3
addClass spinHeart4 heart4
addClass spinHeart5 heart5
addClass spinHeartTab1 heartTab1
addClass spinHeartTab2 heartTab2
addClass spinHeartTab3 heartTab3
if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage)
if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0)
if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1)
if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0)
if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2)
if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0)
if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3)
if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0)
if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4)
if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0)
if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5)
if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0)
if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1)
if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0)
if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2)
if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0)
if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3)
if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0)
[/script]
All of the code for the tabs had to be copied and pasted and changed slightly for each one. If we used if statements instead, it would be quite a headache to keep track of the variables, even if it'll cut down on lines of code.
MiscellaneousSome things I found while I was working on the code, you can't have the div that you are directly spinning also have an overflow-Y:scroll in it or else Chrome will not hide the backface. It caused some annoyances, but a simple work around would be to put a div with the overflow inside the div being spun. I've also put a fadeIn and fadeOut since some versions of Chromes doesn't work properly.

Another thing I found was that you can use [fa]fa-fw[/fa] to generate an empty FA icon. This was done in the tabs to allow the hearts to be free spinning.

This BBcode uses a fluid typography font-size system I've been slowly rolling out to all my fancy code. It is quite interesting how it work. I might go further in depth about it, but for now I'll just explain that it works by having a max and minimum font size for a max and minimum screen size.

Overall, I quite liked this project, even if it caused me pain and suffering this weekend.
 
Last edited:

Users who are viewing this thread

Top