Landing Page with Effects of animation

SOLVE
Regular Contributor

Hi Good Afternoon 

 

I am trying to create a landing page with animation effects like this page: https://www.hubspot.com/stories/chatbot-marketing-future but I am having some issues because I don´t understand so well somethings about css styles. I want to creat all my landing with background image but I don´t know how is the best way to add this images. I have add this image in a module of HubL but I add one of this in each block/section of my landing (I add a screenshot about it).

But I´m not sure if it is the best form to creat this kind of landing. Also I would like to add my logo and this can be sticky. Can you help to decide what is the best way to add this images as background of my landing plis.... 

I add a link about this landing:

https://www.inbest.cloud/desarrollo-en-la-nube

How you can see the logo is an image I wnat this will be sticky.

The images have like a division but i would like that this division doesn´t look.

And the arrow down I would to appear in each section or block and send you to the next section/block.

 

How can I do all of this??

 

I remain to your comments.

 

Thanks very much and Regards.Inside of module HubL in block.PNGModule HubL in block.PNG

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor

Hi Janette,

 

You're headed in the right direction with the background images, although you can alternate some areas with background images and some without to achieve more whitespace. 

 

What they're doing with the animation is called "parallax" and, if you look into their site, you'll see they've divided it into multiple images (the background, characters... etc.) and have each one scrolling at a different speed. 

 

You can search for "parallax" online. I like to check out resources like Codepen that always have simplified examples with the code they used, such as this one which includes a link to his tutorial here

 

EDIT: one that uses pure HTML/CSS/JavaScript can be found here and I was able to replicate it quite easily (see my blog post/Codepen).

 

All the best, 

 

Stephanie

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

Reply
0 Upvotes
3 Replies 3
Regular Contributor

Hi,

You can use image with custom module or image module and then using js you can send them as backgruond.

And if still need more help you can reply me on this.

Reply
0 Upvotes
Regular Advisor

Hi Janette,

 

You're headed in the right direction with the background images, although you can alternate some areas with background images and some without to achieve more whitespace. 

 

What they're doing with the animation is called "parallax" and, if you look into their site, you'll see they've divided it into multiple images (the background, characters... etc.) and have each one scrolling at a different speed. 

 

You can search for "parallax" online. I like to check out resources like Codepen that always have simplified examples with the code they used, such as this one which includes a link to his tutorial here

 

EDIT: one that uses pure HTML/CSS/JavaScript can be found here and I was able to replicate it quite easily (see my blog post/Codepen).

 

All the best, 

 

Stephanie

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

Reply
0 Upvotes
Highlighted
Regular Contributor

Ok Thanks for their comments.

 

Regards