Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    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
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    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
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    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.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: An Interesting CSS Slider

    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: An Interesting CSS Slider

    Far to many free-range birds here. You do know we have avian flu restrictions Acorn?

    Great break-away form the usual sliders
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

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
  •