the Rift


Code Profile Slideshow
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#1



Do you want one of these? Well, you're in luck...
Right now, it only comes in two supported flavors: 5 images, or 8, as Mauja's currently is. And, unless you're CSS savvy, can upload stylesheets somewhere or want to cram it all into the bottom section of a profile field, you're stuck with my tastes on the styling. ;)

What you need:
☼ A stylesheet, either for 5 images, or 8
☼ The basic code to go in the profile
☼ 5, 8 or 10 images

5 Images:
Code:
<link type="text/css" rel="stylesheet" href="http://julle.cc/images/Helovia/Mauja/5.css">

8 Images:
Code:
<link type="text/css" rel="stylesheet" href="http://julle.cc/images/Helovia/Mauja/8.css">

10 Images:
Code:
<link type="text/css" rel="stylesheet" href="http://julle.cc/images/Helovia/Mauja/10.css">

The profile code:
Code:
<div class="container">
   <div id="content-slider">
      <div id="slider">
         <div id="mask">

         <ul>
         <li id="first" class="firstanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_1.jpg" alt="King of Ice and Snow"/>
         <div class="tooltip"> <h1><a href="http://ballare.deviantart.com/art/king-of-ice-and-snow-288074247">King of Ice and Snow</a></h1> <h3><div class="float_right">by <a href="http://ballare.deviantart.com/">Krazie</a></div>
<br />Credits: LarissaAllen & pannifilth @ deviantart.com</h3> </div>
         </li>

         <li id="second" class="secondanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_2.jpg" alt="snow frolic"/>
         <div class="tooltip"> <h1>snowy frolic</h1> <h3><div class="float_right">by <a href="http://i-mi.deviantart.com/">Imi</a></div>
<br />Credits: night-fate-stock, dreamofsandman & deirdre-T @ deviantart.com</h3> </div>
         </li>

         <li id="third" class="thirdanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_3.jpg" alt="snowbeast"/>
         <div class="tooltip"> <h1><a href="http://schwartze.deviantart.com/art/Mauja-the-Frostheart-329941955">The Snowbeast</a></h1> <h3><div class="float_right">by <a href="http://schwartze.deviantart.com">Tamme</a></div>
<br />Credits: The-Kurgan & vivstock @ deviantart.com</h3> </div>
         </li>

         <li id="fourth" class="fourthanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_4.jpg" alt="frostheart & nightshade"/>
         <div class="tooltip"> <h1><a href="http://aquiloniuslupus.deviantart.com/art/shaded-hearts-370114294">the Frostheart & the Nightshade</a></h1> <h3 style="line-height: 80%;"><div class="float_right" style="line-height: 100%;">by <a href="http://aquiloniuslupus.deviantart.com/">Neo</a></div>
<br />Credits: swillowness, LibsHorseStock, Sooty-Bunnie & winesmoke @ deviantart.com</h3> </div>
         </li>

         <li id="fifth" class="fifthanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_5.jpg" alt="tear out all your tenderness"/>
         <div class="tooltip"> <h1><a href="http://blusl.deviantart.com/art/tear-out-all-your-tenderness-366111455">tear out all your tenderness</a></h1> <h3><div class="float_right">by <a href="http://blusl.deviantart.com/">Blu</a></div>
</h3> </div>
         </li>

         <li id="sixth" class="sixthanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_6.jpg" alt="bonded souls"/>
         <div class="tooltip"> <h1><a href="http://i-mi.deviantart.com/art/Frostheart-361066760">two bonded souls</a></h1> <h3 style="line-height: 80%;"><div class="float_right" style="line-height: 100%;">by <a href="http://i-mi.deviantart.com/">Imi</a></div>
<br />Credits: Hudojnica, Iumen & raduluchian @ deviantart.com & jidanchaomian @ flickr.com
</h3> </div>
         </li>

         <li id="seventh" class="seventhanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_7.jpg" alt="rose red"/>
         <div class="tooltip"> <h1><a href="http://aquiloniuslupus.deviantart.com/art/rose-red-369475465">rose red</a></h1> <h3><div class="float_right">by <a href="http://aquiloniuslupus.deviantart.com/">Neo</a></div>
<br />Credits: Sooty-Bunnie, Colourize-Stock & AustriaAngloAlliance @ deviantart.com </h3></div>
         </li>

         <li id="eighth" class="eighthanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_8.jpg" alt="Losing my grip on the world"/>
         <div class="tooltip"> <h1><a href="http://http://edenlore1234.deviantart.com/art/Losing-my-grip-on-the-world-364098521">losing my grip on the world</a></h1> <h3><div class="float_right">by <a href="http://edenlore1234.deviantart.com/">Dark</a></div>
<br />Credits: The-Kurgan & Arctic-Stock @ deviantart.com </h3></div>
         </li>
         </ul>

         </div>
      </div>
   </div>
</div>

Whut?
It's all really simple. You take the code for the number of images you're using, and just put it at the top of the Appearance section (if that is where you have your slide; in truth, you can just put it wherever). And then, you copy the "Basic Code" and put where you want the slideshow to appear.
NOTE: If you're only using 5 images, you have to remove the sixth to eighth slides from the basic code.

Breaking down how to add/change the image:
Code:
<li id="first" class="firstanimation">
         <img src="URL" alt="Fancy Title"/>
         <div class="tooltip"> <h1><a href="url to deviation if you want to">Fancy Title</a></h1> <h3><div class="float_right">by <a href="dA or Helovia profile link">Name of who made the artwork!</a></div>
<br />Credits: like derpadoo @deviantart.com</h3> </div>
         </li>
^ If you use the above code to copy straight into the profile, to replace all my Mauja links, remember to change the id to "second", "third" etc, as well as the class to "secondanimation", "thirdanimation".

Image Size
The slideshow is meant for images 750 x 400 pixels in size, however, if an image is larger it'll just hide the overflow. To make my slides look like I wanted, I made them into slices of the correct size, like this:


Advanced Customization
Alright, so. It should be noted that I can be bribed to adjust the codes for you, but it would have to involve lots of love, and maybe some art. Or Neo in a really boring day.

For this, I am going to assume you know basic CSS and math. If none of this makes sense to you, maybe you shouldn't be trying to edit it. XD
To get the CSS, just open the stylesheet link in you browser. You will either have to save it as a .css file and upload somewhere, or put freeform at the bottom of a profile field in < style > tags. But it's a lot of code, so... :P

Changing the "blueprint"
Code:
/* SLIDER */

#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:400px;
    width:750px;
    margin:0px auto 0;
    overflow:visible;
    position:relative;
}

#mask {
    overflow:hidden;
    height:400px;
}

#slider ul {
    margin:0;
    padding:0;
    position:relative;
}

#slider li {
    width:750px;
    height:400px;
    position:absolute;
    top:-405px;
    list-style:none;
}

Max width should remain 750px, however, you can make it slimmer! Just make sure the width and height is uniform. The minus on top is to make sure it's out of sight, just take the height +5 pixels. It's in the main #slider you can change background color, border, etc. There's a few more instances where height or width needs to be changed, for example in the tooltip. Just use some search/replace function to find them all.

If you want to change the tooltip (the hover bar that comes in, where I've put the credits etc) they're all called #slider .tooltip, with some variations.

Adding more pictures/decreasing the amount
This requires some math. I'm going to use the 5 image one as the model, as it it was the original.

Code:
#slider li.firstanimation {
    animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;
}

#slider li.secondanimation {
    animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    animation:cyclefour 425s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;
}

Here we have the number of animation cycles, and this part is pretty straightforward to edit. Just make sure you've got enough #slider li.xthanimation, and remember to call them cyclesix, cycleseven etc. The time is the total time it takes for one rotation in the slideshow, and it's right now set to 5 seconds per picture. 5x5 is 25, so 25 seconds. The 8 one has a 40s cycle, as I kept the 5s per picture ratio. I won't go into changing the seconds per picture, so just take whatever amount of pictures you have times 5 and you get your cycle.
Remember to add tooltips to the new images, using the #slider li#first:hover etc thing.

And now, the part that makes you tear your brains out...

This is the original animation script:
Code:
@keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

As you can see, there's an animation for each cycle, so begin by setting up your total number of cycles. Then, you need to calculate the percentage. There's 5 seconds per image, so if we're upping it to 8 (using numbers I already have for laziness!), it's a 40 second total. We need to figure out how long a second is, and because the keyframe runs on a percentage, that's 100/40, which happens to be 2.5%. The 5 images animation has 4% per second.

I'll use the first two cycles now, including some "narrative":
Code:
@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

So, we now have to re-calculate the percentage to allow our 2.5% per second cycle of a total of 40 seconds.

Code:
@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   2.5%  { top: 0px; }  /* Used to be 4%, which is one second, so now it's 2.5% */
   10% { top: 0px; opacity:1; z-index:0; } /* 3 seconds visibility would be 7.5%, so at 10% in the cycle */
   12.5% { top: 325px; opacity: 0; z-index: 0; } /* 1 second to exit the image */
   13% { top: -325px; opacity: 0; z-index: -1; } /* I either round up to the nearest whole, or just tack on 1% */
   95% { top: -325px; opacity: 0; z-index: 0; } /* This is 2 seconds out of the total, in preparation for letting the image slide in again. this is special for the first image */
   97.5% { top: -325px; opacity: 0; } /* 1 second to enter image, 100 - 2.5 = 97.5% */
   100%{ top: 0px; opacity: 1; }
}

And the second cycle:
Code:
@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletwo {
    0%  { top:-405px; opacity:0; }
    10% { top:-405px; opacity:0; }
    12.5% { top:0px; opacity:1; }
    15% { top:0px; opacity:1; } /* 1 second to slide in */
    22.5% { top:0px; opacity:1; z-index:0; } /* 3 seconds visibility */
    25% { top:405px; opacity:0; z-index:0; } /* 1 second to slide out */
    26% { top:-405px; opacity:0; z-index:-1; }  /* return to original position, I just tacked on 1% */
    100%{ top:-405px; opacity:0; z-index:-1; }
}

In the other cycles, you will notice a pattern.

Code:
@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
    0%  { top:-405px; opacity:0; }
    22.5% { top:-405px; opacity:0; }
    25% { top:0px; opacity:1; }
    27.5% { top:0px; opacity:1; }
    35% { top:0px; opacity:1; }
    37.5% { top:405px; opacity:0; z-index:0; }
    38% { top:-405px; opacity:0; z-index:-1; }
    100%{ top:-405px; opacity:0; z-index:-1; }
}

Compare it to cycle two. Fifth % from the top is the 2nd % in the next cycle, and you work your way from there following a system of +1 second, 1 second, 3 seconds, 1 second, 1%. Then you just have to do the math yourself, using the % that equals a second based on your total images. :)

Remember to add new code for the images:
Code:
<li id="sixth" class="sixthanimation">
         <img src="http://julle.cc/images/Helovia/Mauja/mauja_6.jpg" alt="bonded souls"/>
         <div class="tooltip"> <h1><a href="http://i-mi.deviantart.com/art/Frostheart-361066760">two bonded souls</a></h1> <h3 style="line-height: 80%;"><div class="float_right" style="line-height: 100%;">by <a href="http://i-mi.deviantart.com/">Imi</a></div>
<br />Credits: Hudojnica, Iumen & raduluchian @ deviantart.com & jidanchaomian @ flickr.com
</h3> </div>
         </li>

I hope this makes some form of sense!
angels, they fell first, but I'm still here

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#2
Ooohh.
Would you like to make this a permanent profile option? I guess that wouldnt be easy to monitor. NEVERMIND.

It's amazing anyway.

I will be using.

Cassiopeia Posts: 171
Hidden Account
Mare :: Pegasus :: 15 hands :: 8 years old
Phantom
#3
This as a profile option would be amazing!

Thanks neo <3
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#4
Honestly, I'd kind of.. rather it wasn't? xD Or I dunno. Maybe as an.. either or thing. Blargh. Mainly because I feel like it is too restrictive and stuff to be the "main" thing. And we'd have to put in filler images.

Edit: I feel like this is more useable/versatile as an add-on. Those who want to give it their own twist (and have the means to do so, or bribe Neo) can, and you can place it where you want, edit the dimensions, etc...
angels, they fell first, but I'm still here

Africa the Starry-Eyed Posts: 727
Deceased
Mare :: Pegasus :: 16 :: 6 (Tallsun) Buff: NOVICE
Silas :: Common Zephyr :: Roc Riven
#5
Wow! Way too complicated for me, but I loved watching all Mauja's beautiful art tick over :D you are extreeeeemly clever!
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#6
Added in a more.. advanced customization section. ^^

Aww, Riv. <3
angels, they fell first, but I'm still here

Psyche the DarkEmpress Posts: 380
Deceased
Mare :: Unicorn :: 15.3 hh :: 8 (ages in Orangemoon) Buff: ENDURE
RayoDeSoleil
#7
Wow, Neo. This is amazing, not to mention YOU HAVE SO MUCH PATIENCE TO TYPE ALL THIS UP KTHNX.

However... if I ever want to do this... I now get to be lazy and use your code instead of writing my own. xD SO THANKS.

BTW... they are reallyreallybeautiful. -flees-
[Image: psycheicon.png]

Please feel free to tag me in all replies!
Use of force and/or magic (with the exception of death) is allowed at all times.

Elizabeth Posts: N/A
Unregistered
:: :: ::
#8
Thanks so much Neo, this is too gorgeous :o I'm loving it, I can't wait to use it <3
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#9
<3 you guys.
angels, they fell first, but I'm still here
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#10
Added support for 10 images. :>
angels, they fell first, but I'm still here
Ascended Helovian

Midas the Gallant Posts: 1,164
Deceased
Stallion :: Pegasus :: 14.3 hh :: Immortal :: Soul is 7 (FF) Buff: HUNTER
Fina :: Common Zephyr :: Phoenix & Wakiya & Neve :: Common Zephyr :: Arctic Angel
#11
Thank you NEO!
[Image: 5388c9b80fe59]


Forum Jump:


RPGfix Equi-venture