Objects that can add value to the NICEPAGE

UP MIDIA SOCIAL WEB
24 Posts
UP MIDIA SOCIAL WEB posted this 4 weeks ago
Ask a Question

Hello, I'm sharing a link to a program I use to create websites and online stores. This page contains demonstrations of all the program's available objects. I hope the team will take a look.

LINK DOS OBJETOS

ENTRE ELES SUGIRO O OBJETO DE ENQUETE

OBJETO FLIP BOOK

OBJETO ANIMATED SHAPE SEPARATOR

OBJETO WHATSAPP CHAT

Vote to pay developers attention to this features or issue.
3 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 4 weeks ago

Hello Luanderson,

Thank you for the suggestions!

We've forwarded your feature requests to our development team for consideration.

...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

UP MIDIA SOCIAL WEB
24 Posts
UP MIDIA SOCIAL WEB posted this 4 weeks ago

Obrigado

Support Team
Support Team posted this 3 weeks ago

Dear Luanderson,

Regarding the Wahtsapp chat, you may implement floating button on your website
Whatsapp floating button

You can download and use the animated icons/images as needed. Refer to the attached block 111.zip and import it into your project.

For the Animated Shape Separator, you can utilize HTML blocks and CSS code to achieve a similar effect. Nowadays, AI can assist with this.
Refer to the attached block 222.zip (export the block to your project)

1.Create an HTML block and paste the following code

<div class="mountain-separator">
  <svg viewBox="0 0 1440 100" preserveAspectRatio="none">
    <path class="mountain-layer back" d="M0 60 L240 30 L480 65 L720 20 L960 60 L1200 35 L1440 50 L1680 30 L1920 65 L2160 20 L2400 60 L2640 35 L2880 50 V100 H0 Z"></path>
    <path class="mountain-layer mid" d="M0 75 L300 45 L600 80 L900 35 L1200 75 L1440 55 L1740 45 L2040 80 L2340 35 L2640 75 L2880 55 V100 H0 Z"></path>
    <path class="mountain-layer front" d="M0 90 L360 60 L720 95 L1080 50 L1440 85 L1800 60 L2160 95 L2520 50 L2880 85 V100 H0 Z"></path>
  </svg>
</div>

2.On the Property Panel, name your block mountain-separator

124yq98r.png

3.Press Edit CSS and paste the following code

.mountain-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85px; /* Low height, as you requested */
  line-height: 0;
  overflow: hidden; /* Clip excess at the edges for seamless looping */
}

.mountain-separator svg {
  display: block;
  width: 200%; /* Stretch the SVG width to create a seamless loop */
  height: 100%;
}

/* Colors and animations for layers with parallax effect */
.mountain-layer.back {
  fill: #214034;
  animation: slideLeft 35s linear infinite;
}

.mountain-layer.mid {
  fill: #355c4d;
  animation: slideLeft 22s linear infinite;
}

.mountain-layer.front {
  fill: #4a7c59;
  animation: slideLeft 12s linear infinite;
}

/* Infinite leftward movement */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

4. Go to the Quick Preview, and objects that will be animated

92yr20.png

...................................................
Sincerely,
Ahmad.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

You must log in or register to leave comments