Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-06-12 18:08:00

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 256
Website

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 smile

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,449
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

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 256
Website

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

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 256
Website

Re: Parallax Scrolling with CSS - test site

Now Clickable Daniel smile

Offline

#5 2016-06-13 00:22:10

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,899
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 test site, Pangolin test site

Offline

#6 2016-06-13 01:27:53

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 256
Website

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

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,630
Website

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. big_smile


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#8 2016-06-13 20:00:20

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 256
Website

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 smile

Offline

Board footer

Powered by FluxBB