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. Website with vertical images | scroll to different sections

Website with vertical images | scroll to different sections

Scheduled Pinned Locked Moved General Discussion
8 Posts 2 Posters 654 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.
  • R Offline
    R Offline
    robsdonatini
    wrote on Apr 10, 2018, 9:00 PM last edited by
    #1

    Hello there, thank you in advance for your precious help without which I would be lost. I tried to find already existing discussion, but maybe I don't know what is the name of what I'm looking for.

    I would like to do a part of a website like this http://nadinegoepfert.com/
    with images that occupy the whole viewport height in background, one after the other, the thing is that I want to use a part of the width white to have text because my image is vertical so it will be dyptics text + image. What is the best way to achieve this? Should I upload a background with already a white part where i will put my text after (see attached) or is there a way to make an image the whole height of the browser and put some text centered next to it so that the white space becomes "responsive" with the reduction of the browser width?

    Plus: do you know which effect is the one Nadine Goepfert's website is using to pass from one section to the other? Is not parallax, isn't it?

    Thank you a lot

    roberta
    0_1523394003725_Schermata 2018-04-10 alle 22.58.12.png

    1 Reply Last reply
    0
    • R Offline
      R Offline
      robsdonatini
      wrote on Apr 10, 2018, 9:04 PM last edited by
      #2

      the idea i have is kind of this (done uploading an image with white space on the left)

      http://www.theamikkelsen.com/category/what

      psw: theatest

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mariusjopen
        Global Moderator
        wrote on Apr 12, 2018, 10:03 AM last edited by
        #3

        Dear @robsdonatini

        Yes, there are a couple of ways to achieve this:

        1. Like you said with the white image background. For the mobile version you can insert a different image.
        2. CUSTOM CSS: You can style the background image with css that it only takes half of the screen.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • R Offline
          R Offline
          robsdonatini
          wrote on Apr 12, 2018, 3:20 PM last edited by
          #4

          ehi @mariusjopen thanks, but you did not mentioned the part of the scrolling down as Nadine Goepfert.. how can I achieve that effect of transition?

          Is there a code I can use?

          thanks

          roberta

          1 Reply Last reply
          0
          • R Offline
            R Offline
            robsdonatini
            wrote on Apr 14, 2018, 6:27 AM last edited by robsdonatini Apr 14, 2018, 2:44 AM
            #5

            I got it... it's a full screen slider! but the thing i do not get is that with her website you just have to touch slightly the trackpad and you go down, while when I do it it hesitate between one slide and the other... mmm..

            1 Reply Last reply
            0
            • M Offline
              M Offline
              mariusjopen
              Global Moderator
              wrote on Apr 16, 2018, 11:44 AM last edited by
              #6

              Dear @robsdonatini

              happy to hear it works now.

              Can you post a link to your slow fullscreen slider?

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • R Offline
                R Offline
                robsdonatini
                wrote on Apr 18, 2018, 5:15 PM last edited by
                #7

                dear @mariusjopen here it is: http://www.theamikkelsen.com/expertise_old

                i also changed the scrolling speed. but i do not achieve the same effect as the website of http://nadinegoepfert.com/

                thanks

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mariusjopen
                  Global Moderator
                  wrote on Apr 22, 2018, 12:02 PM last edited by
                  #8

                  Dear @robsdonatini
                  this is probably because some of your pages are longer than the browser-height.

                  Then it needs a longer scroll.

                  At Nadines page all the pages have a exact browser height.

                  Best!

                  Marius

                  www.mariusjopen.world

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

                  5/8

                  Apr 14, 2018, 6:27 AM


                  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.
                  5 out of 8
                  • First post
                    5/8
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search