Troubles with design parallax effect...

User 131545 Photo


Registered User
687 posts

Wayan Jaya

Have you this what I see in the video as project for inspiration and learning about parallax effect in SD?

Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 2659348 Photo


Registered User
113 posts

Hey Inger,
I found and downloaded that parallax file (https://mock-up.coffeecup.com/f-comps/f … allax.html) the other day and I'm using it. I love it.
BUT..... as the documentation mentions, it doesn't work on mobile.

I found many websites that do have parallax features and other complex things that work fine on mobile. So does anyone know how to get this SD parallax file to work on mobile?

I'm not having any good ideas on how to make the mobile version of my site fun. Just divs with images and paragraphs - BORING!
So any help on getting parallax or other fun things to work on mobile - using SD - would be greatly appreciated!
Knowing is half the battle
User 2659348 Photo


Registered User
113 posts

Nevermind. I just saw in the documentation that there is a CSS parallax component that works on mobile. I'll grab that and mess with and go from there. Thanks!
Knowing is half the battle
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi Chris,

I haven't even tried to make the first parallax you found work on mobiles. The CSS parallax is better for that purpose.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2659348 Photo


Registered User
113 posts

But why does it have a second vertical scroll bar? I wish it would just parallax on it's own because on desktop your cursor can get off the image and you won't realize the image will parallax. And you can miss any "Heading Level 2" info on top of the image.

Maybe this one isn't for me.
Knowing is half the battle
User 2699991 Photo


Registered User
4,782 posts
Online Now

Chris S Peterson wrote:
But why does it have a second vertical scroll bar? I wish it would just parallax on it's own because on desktop your cursor can get off the image and you won't realize the image will parallax. And you can miss any "Heading Level 2" info on top of the image.

Maybe this one isn't for me.


I did one a while ago that works on all devices (or maybe not on Iphones, as I don't have access to apple hardware nowadays)

I need a little time to find it. will let you know when i do
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Chris, did you check out the actual CSS Parallax component? It has just one vertical scrollbar. On the page in my 'Component shop' there are two vertical scrollbars visible just because I have this 'portal' header and navbar that the parallax is wrapped into.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2659348 Photo


Registered User
113 posts

Inger wrote:
Chris, did you check out the actual CSS Parallax component? It has just one vertical scrollbar. On the page in my 'Component shop' there are two vertical scrollbars visible just because I have this 'portal' header and navbar that the parallax is wrapped into.


I downloaded the CSS Parallax component, put it in my site, changed the pics to my pics, and when I previewed it there was another scroll bar. There is the first scroll bar because the page of my site goes off the screen (so the normal scroll bar). But then there was an additional scroll bar next to each image. And if scrolled my mouse wheel too fast I could zoom right past the image and completely miss both images and overlayed text. In other words, I could quickly scroll right past the section that had the additional scroll bar. And if that happens then I didn't scroll IN the section and therefore didn't get to see what was in it. It was like a web page w/in a web page.

I'll see what Wayan has when he finds the one he's looking for.
If all else fails, I like the js parallax (the "Full" one), and I can just do something different on the low breakpoint for mobile.
Knowing is half the battle
User 379556 Photo


Registered User
1,533 posts

Chris S Peterson wrote:
I downloaded the CSS Parallax component, put it in my site ... It was like a web page w/in a web page.

This is not a solution, but rather a comment on what seems to me the cause of the problem.

(a) There are 'templates', which seem to be pre-built web pages where one just changes bits here and there, but may run into difficulties if one tries to change the structure of the page.
(b) There are 'components', which one may hope to be able to place into one's web page.
(c) There are items in between the above. They're not fully blown web pages, and they're not items which can simply be slotted into the web page one is building. For want of a better word I will call them 'examples'.

'Examples' can be used as a starting point in building a web page, something like a mini template, or can be studied to learn how one can introduce the concepts into a page one is already developing. I believe that the item at https://mock-up.coffeecup.com/f-comps/f … allax.html comes within the meaning of what I think of as 'examples', and the problem arises from trying to put it within a web page already being developed.

Frank
User 2699991 Photo


Registered User
4,782 posts
Online Now

Hi Chris
First I found the one I did before, but I forgot that Iy was done in Bootstrap, which I know you are using foundation (assuming it's for your "deckworks site"

I have spent some time getting it onto the foundation framework, which now is looking good and working,
although,

I have to mention, that parallax scrolling is not really considered a good user experience for Android devices, the problem being that it can be a bit juddery as the user scrolls, mostly because most browsers run the JS code at the end and therefore every time a user scrolls, there is a slight delay as the thing plays catch up.
This is slowly improving as modern phones also become more powerful, and capable of handling this effect, but there is no way of knowing what your user's device is capable of doing.

Also, there is and has been an inherent problem with apple devices also not displaying the parallax effect at all, never mind even trying. This has also been fixed to a point by apple themselves, but oh boy the amount of add-on etc, extra code, really makes one wonder if it's worth it at the moment.

Of course laptops (some of the larger Tablets etc)and desktops have no problems.

Anyway, the one I have got going today is easy enough to add into an existing site maybe with some magic, even making existing containers do it.

I have made a demo video as usual, which is uploading as this is typed, but we are really suffering from heavy thunderstorms etc at the moment and have lost electricity 3 times already today, it's chucking it down at the moment, so if it goes again I can't see the poor old electric cable reair man venturing out in this, so keep your
fingers crossed.

I will let you know when its finally up and can be watched.

W
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.