The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design New image transition effect: spin-swipe

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #193339

    Hello all,
    (sorry, maybe this should’ve gone to Other Discussion instead of Design Den?)
    Nevertheless, despite still having trouble to implement a sophisticated ‘engine’ for image transitions (i.e, a window on the webpage where images appear one over the other after a few seconds) that allows for user input just with CSS, I came up quite by accident with (what I think is) a surprising effect for these, which I’m sure someone else must have conceived before, but since I don’t know, I thought in sharing with you (to show my “creation” so you can see how cool I am!! ;)) Come on, it helps one’s ego! :))
    I call it a SPIN-SWIPE transition, it’s nothing groundbreaking, just that it combines fading with sliding with rotating: (I hope I’m doing right finally with character escaping…)

    In the HTML, set up the image list (suppose 4 images of size 680×450 px, to be changed after 3s, so the total animation time is 12s; you can have as many as you want or with any timing you want, I trust you’ll know to adapt the code appropriately):

    <UL class='photos'>
    <LI class='img1'><img src='your-img1.jpg' title='your descrip.1' /></LI>
    <LI class='img2'> ... same thing, set up the other images here in <img> tags each with a class imgX...</LI>

    In the CSS, put:

    .photos { width: 680px; height: 450px; position: relative; overflow hidden; whitespace: nowrap; }
    .photos img { width: 680px; height: 450px; }
    .photos li { left: 200%; position: absolute; W-transition: transform 2s ease-out; }
    /* you must expand W- to -webkit-, -o-, -moz-, nothing, etc. */
    .photos .img1 { animation: spinswipe 12s -1s infinite; } 
    .photos .img2 { animation: spinswipe 12s 2s infinite; }
    .photos .img3 { animation: spinswipe 12s 5s infinite; }
    .photos .img4 { animation: spinswipe 12s 8s infinite; }
    /* Expand the W-'s below accordingly to -webkit-, etc. <em>/
    @W-keyframes spinswipe { 
    /</em> percentages are 100/(4images*3s), 100/4 images */
       8.33%, 25% { left: 0; opacity: 1; z-index: 1; W-transform: scale(1); }
       0%, 33.33%, 100% { opacity: 0; z-index: 0; W-transform: rotate(45deg); }

    Don’t forget to macro-expand the W- to nothing, -webkit-, etc. for all the browsers. I hope I didn’t make any mistake in transposing my working code, much more complicated with many more images and other crisscrossing complexities, to the example code above. If there’s anything wrong, let me know. Also, you can tweak it to obtain other “zesty” effects:

    If you change the rotate(45deg) part above with scale(1.8) you get an interesting carrousel look with an optical illusion because, since the fading out image is stretched, it appears that the sliding on (the coming in) image is shrunk, but it’s not.

    Have fun,
    Egp. (I still have to answer to my other thread, it’s complicated…)


    An example from Codepen can be embedded here with a simple link. There’s a whole lot of code there you might be interested in by the way.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.