Welcome to TalkGraphics.com
Results 1 to 6 of 6
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,901

    Lightbulb An Interesting CSS Slider

    This is a design for five images.
    More or less and you will need to do a small amount of arithmetic.

    I have covered the following concepts in other threads so you need to have a little understanding of their use here:
    • Name - UsesJQuery. I was lazy in using jQuery for this $().wrap() operation but the JavaScript equivalent is quite busy.
    • Name - htmlclass='picture'. Allows a collection of all 'pictures' to be handled.
    • Layer - !Images. When hidden, its contents are still rendered. Useful for a tidy design.
    • Web image type - PNG. Ensures the alpha channel is used otherwise you get chunks of the design being move around too.


    Place any five images into the !Images layer and Group them.
    The images are best with transparency and so need to be set to PNG. Enabling WebP is a bonus.
    These must be grouped.

    All you then do is arrange them or their order and change the speed of the slider and how much you want the images to move.

    CSS - Carousel.xar

    To add a sixth image:
    • Find the fifth child entry - img:nth-child(5) { animation-delay: calc(var(--time) * (4/5)); }
    • Copy and change the copy to img:nth-child(6) { animation-delay: calc(var(--time) * (5/6)); }
    • Work back down the originals, changing each 5 to a 6.


    Ten images would need 10 child statements; the last would be 9/10 decreasing by one all the way down to 1/10.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  2. #2
    Join Date
    Mar 2009
    Posts
    4,295

    Default Re: An Interesting CSS Slider

    Nice one, Acorn, although I'm not sure how I could use this other than a 'regular' carousel. Thanks for sharing.

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,901

    Default Re: An Interesting CSS Slider

    Boy, thanks.

    I got to thinking out of the box, which is what I did here, freeing the pictures.
    The liberating discovery was breaking the flow through any random pauses.

    Perhaps, I should have made put 50% { transform: translateX(var(--wide)); opacity: 0; } as 50% { transform: translateY(var(--wide)); opacity: 0; } instead?

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  4. #4
    Join Date
    Mar 2009
    Posts
    4,295

    Default Re: An Interesting CSS Slider

    Quote Originally Posted by Acorn View Post

    Perhaps, I should have made put 50% { transform: translateX(var(--wide)); opacity: 0; } as 50% { transform: translateY(var(--wide)); opacity: 0; } instead?
    I ran your reply through Google Translate but unfortunately that didn't help.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,901

    Default Re: An Interesting CSS Slider

    Quote Originally Posted by Boy View Post
    I ran your reply through Google Translate but unfortunately that didn't help.
    Boy, agreed, the "put" was a remnant!

    Acornish: "Perhaps, I should have made [put] 50% { transform: translateX(var(--wide)); opacity: 0; } as 50% { transform: translateY(var(--wide)); opacity: 0; } instead?"
    English: "Change the CSS statement (50%) so that the picture drops and fades off the bottom of the page. The change to a Y is move on the Y-axis. A positive direction is downwards."

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  6. #6
    Join Date
    Mar 2009
    Posts
    4,295

    Default Re: An Interesting CSS Slider

    Quote Originally Posted by Acorn View Post

    Acornish: "Perhaps, I should have made [put] 50% { transform: translateX(var(--wide)); opacity: 0; } as 50% { transform: translateY(var(--wide)); opacity: 0; } instead?"
    English: "Change the CSS statement (50%) so that the picture drops and fades off the bottom of the page. The change to a Y is move on the Y-axis. A positive direction is downwards."
    Now you're making sense, Acorn!

    PS: You know, I always save the link to each of your goodie threads within the respective .xar file so additional details and clarifications are only one click away.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •