Unbounce próximo nível:

Controls CSS
Compilei diversos estilos CSS para ser facilmente utilizados nas suas páginas

<style>
/* APLICAR SOMBRA PROJETADA */
.sombra {
box-shadow: 0px 20px 10px 5px #0000000D; !important;
transition: all .8s;
}
.sombra:hover {
box-shadow: 0px 10px 5px 0px #00000026; !important;
}

/* APLICAR EXPANSÃO DE ELEMENTOS */

.zoom {
transition: all .8s;
}
.zoom:hover {
transform: scale(1.03,1.03);

}
.zoom:active
{
transform: scale(1.06,1.06);
}

/* APLICAR CONTRAÇÃO DE ELEMENTOS */

.contract {
transition: all .7s;
}
.contract:hover {
transform: scale(0.97,0.97);

}
.contract:active
{
transform: scale(0.94,0.94);
}

/* APLICAR DESFOQUE DE ELEMENTOS */

.glass {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.glass2 {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}

/* MUDAR COR DO TEXTO COM HOVER */

.vermelho {
color: #c6c6c6; !important;
transition: all .6s;
}
.vermelho:hover {
color: #e50914;
}

/* REVELAR ELEMENTOS COM HOVER */

.reveal{
opacity: 0;
transition: all .8s;
}
.reveal:hover{
opacity: 1;
}

Unbounce próximo nível: 1

 /* BORDA ARREDONDADA */

.round {
border-radius: 3%;
}

/* CONTADOR CRESCENTE */
.counter {
font-family: Work Sans;
font-size: 48px;
line-height: 48px;
font-weight: 700;
color: #e50914;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

/* BOTÃO PULSANTE */

.pulsate-bck {
-webkit-animation: pulsate-bck 2.5s ease-in-out infinite both;
animation: pulsate-bck 2.5s ease-in-out infinite both;
transition: all .8s;
}

@-webkit-keyframes pulsate-bck {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulsate-bck {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

/* AO CLICAR MOVER PARA O TOPO (PRECISA DO JAVASCRIPT) */

.scroll-to-top {
cursor: pointer;
}

/* BLOQUEAR SELEÇÃO DE TEXTO */

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

</style>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb87ddb3-5fea-4cd5-8a82-7c4243d378be/COMO
_UTILIZAR_AS_CLASSES.mp4

Unbounce próximo nível: 2

 Header fixado + Desfoque
Header Fixado - JavaScript

<script type="text/javascript">

// Fixed Header v1.1

// Replace ID below with your own box ID

var boxToAppend = '#lp-pom-box-13';

var boxParent = $(boxToAppend).parent();

$(boxToAppend).clone().appendTo(boxParent).css({"position":"fixed", "left":"0", "top":"0", "width":"100%", "z-index":"899"}).

$(boxToAppend).css({"position":"fixed", "left":"auto", "top":"0px", "width":"100%", "z-index":"999", "border-style":"none non

</script>

Efeito de Desfoque - CSS

<style>
.desfoque1 {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.desfoque2 {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}

</style>

Zoom nos Botões

Zoom - CSS

<style>
.zoom {
transition: all .8s;
}

.zoom:hover {
transform: scale(1.1,1.1) translateY(-2%);

}
.zoom:active
{
transform: scale(1.2,1.2) translateY(-2%)
}
</style>

Animação de Elementos
Animação de Elementos - JavaScript

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>

<script>
//Update this function call with your own element ID, animate.css animation, and timeout in milliseconds. Each animated element
//Supported animations are 'fadeInUp' 'fadeInDown' 'flipInX' 'lightSpeedIn' 'bounceIn' 'slideInLeft' 'slideInRight' 'fadeInLeft

//BENEFÍCIOS
addAnimationData('#lp-pom-box-50','fadeInUp','700');
addAnimationData('#lp-pom-box-51','fadeInUp','800');
addAnimationData('#lp-pom-box-52','fadeInUp','900');
addAnimationData('#lp-pom-box-53','fadeInUp','1000');
addAnimationData('#lp-pom-box-54','fadeInUp','1100');
//addAnimationData('#your-next-element','bounceIn','2000');

Unbounce próximo nível: 3

 function addAnimationData(elem, elemData, elemTimeout) {
$(elem).addClass("revealOnScroll").attr("data-animation",elemData).attr("data-timeout",elemTimeout);
}
$(function() {
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) { $('.revealOnScroll').addClass('animated'); }
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
//add additional animate.css animations to the removeClass function
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn bounceIn slideInLeft slideInRight fadeInLeft fadeInRight')
}
});
}
revealOnScroll();
});
//Original script created by Benoît Boucart: http://blog.webbb.be/
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0002-03-037
*/
</script>

Animação de Elementos - CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<style>
.revealOnScroll{opacity:0;}
</style>

Menu Retrátil
Menu Retrátil - HTML

<section class="accordion-wrapper">
<section class="accordion">
<input type="radio" name="radio-a" class="accordion-input" id="check1" checked>
<label class="accordion-label" for="check1">Criação</label>
<section class="accordion-content">
<p>Recomendo o uso desse menu para FAQ's</p>
</section>
</section>
<section class="accordion">
<input type="radio" name="radio-a" class="accordion-input" id="check2">
<label class="accordion-label" for="check2">De</label>
<section class="accordion-content">
<p>Para listas de conteúdos de cursos</p>
</section>
</section>
<section class="accordion">
<input type="radio" name="radio-a" class="accordion-input" id="check3">
<label class="accordion-label" for="check3">Menu</label>
<section class="accordion-content">
<p>Catálogos de produtos</p>
</section>

Unbounce próximo nível: 4

 </section>
</section>
<section class="accordion">
<input type="radio" name="radio-a" class="accordion-input" id="check4">
<label class="accordion-label" for="check4">Retrátil</label>
<section class="accordion-content">
<p>Ou descrição de serviços citados ao longo da página do cliente.</p>
</section>
</section>
</section>

Menu Retrátil - CSS

<style>
#lp-code-66
body .accordion-wrapper {
color: #ffffff;
background-color: #131313;
padding: 0 1em 1em;
}
h1 .accordion-wrapper{
text-align:center;
}
.accordion-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.accordion-wrapper {
border-radius: 8px;
overflow: hidden;
width: 100%;
margin:0 auto;
}
.accordion {
width: 100%;
color: #ffffff;
overflow: hidden;
margin-bottom: 5px;
}
.accordion:last-child{
margin-bottom: 5px;
}
.accordion-label {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
padding: 20px;
background-color: #383838;
font-weight: 600;
cursor: pointer;
font-size: 16px;
border-radius: 8px;
letter-spacing: 0px;
}
.accordion-label:hover {
background-color: #E90514;
transition: all .7s;
}
.accordion-label::after {
content: "\276F";
width: 16px;
height: 16px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
transition: all 0.5s ease-out;
letter-spacing: 0px;
}
.accordion-content {
max-height: 0;
padding: 0 16px;
color: #FFFFFF;
background-color: #ffffff opacity:0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.5s ease-out;
}
.accordion-content p{
color: #ffffff;
font-size: 15px;
line-height: 130%;
font-weight: 300;
letter-spacing: 0px;
}
input:checked + .accordion-label {

Unbounce próximo nível: 5

 background-color: #9B070F;

}
input:checked + .accordion-label::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: all 0.5s ease-out;
}
input:checked ~ .accordion-content {
max-height: 100vh;
padding: 16px;
}
</style>

Brilho Externo e Sombra Projetada

Sombra Projetada - CSS

<style>
.sombra {
box-shadow: 0px 0px 5px 0px #000000aa; !important;
transition: all .8s;
}
.sombra:hover {
box-shadow: 0px 0px 50px 5px #00000040; !important;
}
</style>

Brilho Externo - CSS

<style>
.brilho {
box-shadow: 0px 0px 5px 0px #e50914; !important;
transition: all .8s;
}
.brilho:hover {
box-shadow: 0px 0px 50px 5px #e5091440; !important;
}
</style>

Fontes de fora do Unbounce

Bebas Neue - Head - JavaScript

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

Bebas Neue - CSS

<style>
#lp-pom-root

.bebas {
font-family: 'Bebas Neue';
}
</style>

Carrossel Dinâmico
Head Carrossel - JavaScript

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" cross

Carrossel Dinâmico - JavaScript

Unbounce próximo nível: 6

 <script>
/*
Unbounce Community :: Tips & Scripts :: Carousel With A Box Widget
TS:0002-04-063
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/
// CDN link here - https://code.jquery.com/
// Add a box to the page and nest the elements inside (can include boxes with grouped content)
// The first element that is nested in the containing box will be what shows on page load
$(function() {
// Add a box to the page and nest the elements inside (can include boxes with grouped content)
// The first element that is nested in the containing box will be what shows on page load
// Add ID of box containing elements.
var container = $("#lp-pom-box-98");

// Add ID of right button

var right = $("#lp-pom-button-293");

// Add ID of left button

var left = $("#lp-pom-button-292");

var time = 500;

// code to select and centre elements

container.children().css({
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
var allEls = container.children().not(":eq(0)");
var notFirst = allEls.not(":eq(0)");
notFirst.css('display', 'none');

// Functions to cycle through the elements in the containing box and show/hide them
function cycleRight(el, delay) {
$(el[0]).fadeIn(500)
.delay(delay)
.fadeOut(500)
.promise()
.done(function() {
$(el[1]).fadeIn(500);
var putBack = el.splice(0, 1);
allEls.push(putBack[0]);
});
}

function cycleLeft(el, delay) {

$(el[0]).fadeIn(500)
.delay(delay)
.fadeOut(500)
.promise()
.done(function() {
$(el.last()).fadeIn(500);
var putBack = el.splice(-1, 1);
allEls.splice(0, 0, putBack[0]);
});
}

function cycleTimeRight() {
cycleRight(allEls, time);
$(right).off('click');
setTimeout(function() {
$(right).on('click', cycleTimeRight);
}, time*3);
}

function cycleTimeLeft() {
cycleLeft(allEls, time);
$(left).off('click');
setTimeout(function() {
$(left).on('click', cycleTimeLeft);
}, time*3);
}

$(right).click(function() {
cycleTimeRight();
});

$(left).click(function() {
cycleTimeLeft();
});
});
</script>

Unbounce próximo nível: 7

 Utilização de Lottie Files
Exemplo de animação - HTML

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_enm1ohpk.json" background="transparent" speed="1" style="w

LottieFiles - Download Free Lottie Animations, Integrations & Plugins

The world's largest platform for Lottie animations. Add free animations anywhere (even if you don't know
motion design) or create, collaborate & ship motion easily with LottieFiles' design & developer tools.

https://lottiefiles.com/

Seleção de Texto Colorida

Seleção de Texto Colorida - JavaScript ou CSS
o código abaixo pode ser aplicado tanto como CSS como Javascript

<style>
#lp-pom-root

::-moz-selection { /* Code for Firefox */

color: #FFFFFF;
background: #E50914;
}

::selection {
color: #FFFFFF;
background: #E50914;
}
</style>

Barra de Rolagem Colorida

Barra de Rolagem Colorida - JavaScript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
background: #000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #e50914;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #e50914;
}
</style>
</head>

<body>

Unbounce próximo nível: 8

 Barra de Progresso Colorida
Barra de Progresso Colorida - JavaScript

<script>
/* PrognRoll | https://mburakerman.github.io/prognroll/ | @mburakerman | License: MIT */
(function ($) {
$.fn.prognroll = function (options) {

var settings = $.extend({

height: 5, // progress bar height
color: "#50bcb6", // progress bar background color
custom: false // if you make it true, you can add your custom div and see it's scroll progress on the page
}, options);

var progressBar = $("<span>", {

class: "prognroll-bar",
});

return this.each(function (i, el) {

if ($(this).data("prognroll")) {
return false;
}
$(this).data("prognroll", true);

$("body").prepend(progressBar).end().find(".prognroll-bar").not(":first").remove();

$(".prognroll-bar").css({
position: "fixed",
top: 0,
left: 0,
width: 0,
height: settings.height,
backgroundColor: settings.color,
zIndex: 2147483647
});

var globals = {
"windowScrollTop": $(window).scrollTop(),
"windowOuterHeight": $(window).outerHeight(),
"bodyHeight": $(document).height()
}

function bindWindowScroll() {
$(window).scroll(function (e) {
e.preventDefault();
globals.windowScrollTop = $(window).scrollTop();
globals.windowOuterHeight = $(window).outerHeight();
globals.bodyHeight = $(document).height();

var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;

$(".prognroll-bar").css("width", total + "%");
});
}

if (settings.custom === false) {

bindWindowScroll();
} else {
// if el has no max-height set
if ($(this).css("max-height") == "none") {
bindWindowScroll();
} else {
$(this).scroll(function (e) {
e.preventDefault();
var customScrollTop = $(this).scrollTop();
var customOuterHeight = $(this).outerHeight();
var customScrollHeight = $(this).prop("scrollHeight");

var total = (customScrollTop / (customScrollHeight - customOuterHeight)) * 100;

$(".prognroll-bar").css("width", total + "%");
});
}
}

// get scroll position on on page load

var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;
$(".prognroll-bar").css("width", total + "%");
});
};
})(jQuery);
</script>
<script>
$(function() {
$("body").prognroll({
height: 3, //Progress bar height in pixels

Unbounce próximo nível: 9

 color: "#e50914", //Progress bar background color
});
});
</script>

JQuery 3.7.0
JavaScript

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorig

Unbounce próximo nível: 10