Community @ The Turning Gate
Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
- New user registrations are disabled.
- Users cannot create new topics.
- Users cannot reply to existing topics.
You are not logged in.
- Topics: Active | Unanswered
#1 2016-06-12 18:08:00
Parallax Scrolling with CSS - test site
Hi Guys,
I've been wanting to get a bit of movement on my Home page for my new Backlight site and found a couple of techniques that were not too difficult to do. The First one pins the Navigation to the top of the page on scroll so that a visitor does not have to scroll back to the top of the page to navigate. This is done with a small JavaScript added via the the ttg_scripts hook in a custom phplugins file and some css styling.
The Parallax Scroll is done by adding Markup for the structure in the Home Page Copy section in Backlight Admin. Styling is then added to my custom CSS. No Javasripting is involved 
It's still evolving, and is not Mobile friendly yet. I am trying to get the images called from a hidden Publisher Gallery, although getting the image quality and file naming to line up with the css is a little testing....
Constructive criticism/feedback/suggestions gratefully accepted. And if someone can tell me what I'm going to fill all that text area with, that would be a bonus. I'm not good with words!
You can find the test site here: njp.kopstone.co.uk
Last edited by lofty (2016-06-12 18:09:24)
Offline
#2 2016-06-12 18:49:15
- Daniel Leu
- Moderator
- Registered: 2012-10-11
- Posts: 1,624
- Website
Re: Parallax Scrolling with CSS - test site
I like it, Jon! Something to think about! That's really cool!
The first thing I did was clicking on the big landscape title on the front page.... which is not clickable!
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
#3 2016-06-12 19:09:48
Re: Parallax Scrolling with CSS - test site
Ah!
Good point Daniel, I haven't linked them yet. I'll sort that out soon.....
Offline
#4 2016-06-12 19:28:07
Offline
#5 2016-06-13 00:22:10
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: Parallax Scrolling with CSS - test site
Very cool Jon. Looks fantastic.
The only problem I foresee is if you plan on using the forthcoming Cart. I wonder about any conflicts between the sticky menu and the Cart status bar. But I'm sure you'll work that out when/if the time comes.
Nice job!
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
#6 2016-06-13 01:27:53
Re: Parallax Scrolling with CSS - test site
Thanks Rod,
Yep, having fun working that out on the Water Gallery where I have the CRG enabled. I think it can be sorted by changing where the Navigation gets pinned to, but that may involve having a separate Menu for those Galleries. Currently the Navigation would get hidden by the CRG/Cart Header when scrolling.
Offline
#7 2016-06-13 14:55:40
Re: Parallax Scrolling with CSS - test site
Good stuff, Jon. It's fun to see people building on Backlight's foundation. Hopefully, after we finally have all of the add-ons ported over from CE4, we can go back and start adding some creative options similar to this stuff. 
Offline
#8 2016-06-13 20:00:20
Re: Parallax Scrolling with CSS - test site
Thanks Matt,
I love that I can work on Backlight wherever I have Internet and not be pinned to my desk at home to make changes. Adding Markup content in the Copy area is a revelation and something I should have paid attention to in CE4..... Still have a long way to go and these bits may not make their way onto my finished site, but so much fun trying new stuff out. Can't wait for Stage and Wordpress Addons. Just have to find a way to trigger a remote re-publish now
Offline