Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Scroll zoom transition

Scroll zoom transition

Scheduled Pinned Locked Moved General Discussion
9 Posts 3 Posters 152 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    PatFontebasso
    wrote on last edited by PatFontebasso
    #1

    Hey! I would like to try something I saw on certain camera manufacture pages..

    So in Gridder I made the first "picture" (Backside of the camera)
    and when you scroll you come to the first photo.
    So while you scroll from 1 to 2 in the gridder. I want to zoom through the Viewfinder of the Camera.

    I found this tutorial. But its not quite working for me..
    https://www.youtube.com/watch?v=5d-shXKoRl8

    So right now it looks like this
    https://imgur.com/a/kmYoI33

    Best Regards,
    Patricio

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      hey so i'd need a link to the page where u tried to do this

      i dont think this code is compatible with fullscreen slider

      i think to code this u need some experience no

      1 Reply Last reply
      0
      • P Offline
        P Offline
        PatFontebasso
        wrote on last edited by
        #3

        Hey,

        https://www.nikonusa.com/en/nikon-products/product/mirrorless-cameras/z-9.html

        Like here if you scroll down to the point where it zooms through the Viewfinder.

        So far it looks in CSS like this ".zoom {
        position: sticky;
        top: 20vh;
        will-change: transform;
        width: 100%;
        transform: scale(1.0);
        }

        .bottom {
        height: 100vh;
        }

        .top {
        height: 50vh;
        }

        .wrap {
        position: sticky;
        height: 75vh;
        width: 50vh;
        top: 50vh;
        left: 20%;
        }
        "

        and HTML
        "<section class="top"></section>
        <section class="wrap">
        <img class="zoom" src="https://patriciofontebasso.com/wp-content/uploads/2024/03/yash4.jpg" >
        </section>
        <section class="bottom"></section>"

        And I would love to know how to limit this effect to one page only.. now its on every page. But ChatGPT and Tutorials do not explain it so well to me. (I just started to "code" today)

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          no i mean a link of your lay theme page

          P 1 Reply Last reply
          0
          • arminunruhA arminunruh

            no i mean a link of your lay theme page

            P Offline
            P Offline
            PatFontebasso
            wrote on last edited by
            #5

            @arminunruh

            https://patriciofontebasso.com/

            1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              no i mean on the actual page on your website where u're trying to make this work ^^<3

              P 1 Reply Last reply
              0
              • arminunruhA arminunruh

                no i mean on the actual page on your website where u're trying to make this work ^^<3

                P Offline
                P Offline
                PatFontebasso
                wrote on last edited by
                #7

                @arminunruh

                https://patriciofontebasso.com/yashica-analogue-zoom-test/

                Yeah idk. I give up. I need to take more HTML, CSS and JavaScript courses to get it to work as shown in the examples from Nikon or Hasselblad above.

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  felix_rabe
                  wrote on last edited by felix_rabe
                  #8

                  @PatFontebasso nice photos on your website! I think for this animation you would need a js script that scales the image according to the scroll-position.

                  I made this here with the logo, but it gets smaller on scroll.
                  https://sanmedicus.de

                  you can use the website codepen.io to mess around and build sketches before implementing it to lay theme.

                  P 1 Reply Last reply
                  2
                  • F felix_rabe

                    @PatFontebasso nice photos on your website! I think for this animation you would need a js script that scales the image according to the scroll-position.

                    I made this here with the logo, but it gets smaller on scroll.
                    https://sanmedicus.de

                    you can use the website codepen.io to mess around and build sketches before implementing it to lay theme.

                    P Offline
                    P Offline
                    PatFontebasso
                    wrote on last edited by
                    #9

                    @felix_rabe <3 thanks so far mate! Looks good. I might try again to do it hehe.

                    1 Reply Last reply
                    0
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    I also code custom websites or custom Lay features.
                    šŸ’æ Email me here: šŸ’æ
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search