Troubles with design parallax effect...

User 131545 Photo


Registered User
687 posts

Hi everyone,

I have been testing the parallax effect for background image for two weeks now and I can't do that.
Who can take a look at my project because it doesn't want to do what it has to do.
That is the website where I follow the steps because to get started but nothing works here
Can someone help me on my way here so that I still have that parallax effect.
I don't see any background images and no parallax effect.
What goes wrong here in the design of my project
My project attached. I have already tried everything but no results

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 122279 Photo


Senior Advisor
14,535 posts
Online Now

You need to have a wrapping container outside the parallax window with some kind of content to make the page scroll at all.
You need to reference the parallax.js in the 'footer js' box of the wrapper container
You need one more attribute: 'Data Z index: 1'

That should be it.
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 131545 Photo


Registered User
687 posts

Inger,

I don't really understand what to do.
I understand that you need a wrapper container and nested in my parallax container is what you mean.
Can you give an example, don't understand so well.

You are the expert Inger.
I really appreciate that you have always helped me and I still do.

What do you think about the implementation of Tailwindcss because it has a lot of classes and you can create additional ones?

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 122279 Photo


Senior Advisor
14,535 posts
Online Now

Check this one out. And compare with what I wrote in my previous post, then you will understand it better. You can see a similar one here: https://mock-up.coffeecup.com/f-comps/f … allax.html . It has been built with Foundation, but it is done in exactly the same way in Bootstrap.

And one more thing: When you open the file I sent, you won't see the image. Don't think there is something wrong, it is just that stuff you add in the boxes on the new Element pane won't be visible until you preview. Just like it always was with HTML elements.

I don't know tailwind css, therefore I have no opinion about it.
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 2699991 Photo


Registered User
5,057 posts
Online Now

STEFKE wrote:
Inger,

I don't really understand what to do.
I understand that you need a wrapper container and nested in my parallax container is what you mean.
Can you give an example, don't understand so well.

You are the expert Inger.
I really appreciate that you have always helped me and I still do.

What do you think about the implementation of Tailwindcss because it has a lot of classes and you can create additional ones?

Kind regards
Stephane

Sorry you don't need any other containers just go with what you have but change things a bitto but in,

Stephane

All you need to do is
1/ remove the JS script source from the containers footer

add the following code to the footer in the footer section in site manager (the code you had was not pointing to the image file

<script>
$('.parallax-window').parallax({imageSrc: './images/parallax-bg.jpg'});
</script>

also in the footer section in page manager add the link to the JS file parallax.js


When you have done that the footer section in the page manager should look like this

<script src="./js/parallax.js"></script>
<script>
$('.parallax-window').parallax({imageSrc: './images/parallax-bg.jpg'});
</script>

all you need do then is to give the body some height 300vh just for testing purposes

here is a short video showing it working with the settings and links as shown above
https://youtu.be/qoGO4rMPnjU

If you still cannot I will make a video showing how to do it
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,057 posts
Online Now

Here is your project file with the changes
Attachments:
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 122279 Photo


Senior Advisor
14,535 posts
Online Now

Wayan, we set out with different source files. For my approach, the one with the attributes, I still maintain the need for a wrapper around the rest. ;)
But your way is a good one too.
However, if we try to make a component of either your solution or mine, they will both fail. - BUT, I have found a workaround for mine! :lol:
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 2699991 Photo


Registered User
5,057 posts
Online Now

Inger wrote:
Wayan, we set out with different source files. For my approach, the one with the attributes, I still maintain the need for a wrapper around the rest. ;)
But your way is a good one too.
However, if we try to make a component of either your solution or mine, they will both fail. - BUT, I have found a workaround for mine! :lol:


Hi Inger
I didn't even bother bothered looking at the one with the attributes :lol:
I figured just the one way was needed

I also don't do components as you know, so not really bothered if it can't be made as a component either :D:D
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,057 posts
Online Now

Wayan Jaya wrote:
Inger wrote:
Wayan, we set out with different source files. For my approach, the one with the attributes, I still maintain the need for a wrapper around the rest. ;)
But your way is a good one too.
However, if we try to make a component of either your solution or mine, they will both fail. - BUT, I have found a workaround for mine! :lol:


Hi Inger
I didn't even bother bothered looking at the one with the attributes :lol:
I figured just the one way was needed

I also don't do components as you know, so not really bothered if it can't be made as a component either :D:D


One could always save the page as a theme if one wanted to make a new project with that parallax effect
and save the component as a symbol if one wanted to have that parallax effect on another page or pages then just change the path to another image
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,057 posts
Online Now

Wayan Jaya wrote:
Wayan Jaya wrote:
Inger wrote:
Wayan, we set out with different source files. For my approach, the one with the attributes, I still maintain the need for a wrapper around the rest. ;)
But your way is a good one too.
However, if we try to make a component of either your solution or mine, they will both fail. - BUT, I have found a workaround for mine! :lol:


Hi Inger
I didn't even bother bothered looking at the one with the attributes :lol:
I figured just the one way was needed

I also don't do components as you know, so not really bothered if it can't be made as a component either :D:D


One could always save the page as a theme if one wanted to make a new project with that parallax effect
and save the component as a symbol if one wanted to have that parallax effect on another page or pages then just change the path to another image


here is a video thingy for having that component on a new project, with two pages, second page with 2 components on same page different images

https://youtu.be/Zr3m4uwpd_Y
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/

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.