Помощь с CSS эффектом
Не могу понять и найти пример как можно реализовать данный эффект. http://project2022839.tilda.ws/page16839362.html
Код тильды слишком минифицирован(
Ответы (1 шт):
Автор решения: hot_penguin
→ Ссылка
Если проблема только лишь в минифицированном коде, тогда держи читаемый его вид: https://codepen.io/Gregory__/pen/QWKepog
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--metatextblock-->
<title>Blank page</title>
<meta property="og:url" content="http://project2022839.tilda.ws/page16839362.html" />
<meta property="og:title" content="Blank page" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<link rel="canonical" href="http://project2022839.tilda.ws/page16839362.html" />
<!--/metatextblock-->
<meta property="fb:app_id" content="257953674358265" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="https://tilda.ws" />
<link rel="dns-prefetch" href="https://static.tildacdn.com" />
<link rel="shortcut icon" href="https://static.tildacdn.com/img/tildafavicon.ico" type="image/x-icon" />
<!-- Assets -->
<link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://tilda.ws/project2022839/tilda-blocks-2.12.css?t=1611669240" type="text/css"
media="all" />
<link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-animation-1.0.min.css" type="text/css"
media="all" />
<link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-slds-1.4.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="all" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Russo+One&display=swaprel=stylesheet"
type="text/css" />
<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
<script src="https://static.tildacdn.com/js/tilda-scripts-2.8.min.js"></script>
<script src="https://tilda.ws/project2022839/tilda-blocks-2.7.js?t=1611669240"></script>
<script src="https://static.tildacdn.com/js/lazyload-1.3.min.js" charset="utf-8"></script>
<script src="https://static.tildacdn.com/js/tilda-animation-1.0.min.js" charset="utf-8"></script>
<script src="https://static.tildacdn.com/js/tilda-slds-1.4.min.js" charset="utf-8"></script>
<script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8"></script>
<script src="https://static.tildacdn.com/js/tilda-zoom-2.0.min.js" charset="utf-8"></script>
<script src="https://static.tildacdn.com/js/tilda-animation-ext-1.0.min.js" charset="utf-8"></script>
</head>
<body class="t-body" style="margin: 0;">
<!--allrecords-->
<div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="2022839"
data-tilda-page-id="16839362" data-tilda-formskey="6289f2c2b087adbfb88cd05c35f345b4" data-tilda-lazy="yes">
<div id="rec273909534" class="r t-rec" style="" data-animationappear="off" data-record-type="396">
<div class="t396">
<div class="t396__artboard" data-artboard-recid="273909534" data-artboard-height="550"
data-artboard-height_vh="" data-artboard-valign="center" data-artboard-ovrflw="">
<div class="t396__carrier" data-artboard-recid="273909534"></div>
<div class="t396__filter" data-artboard-recid="273909534"></div>
<div class="t396__elem tn-elem tn-elem__2739095341611667130108" data-elem-id="1611667130108"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="480" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667170625" data-elem-id="1611667170625"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="480" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="30">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667173840" data-elem-id="1611667173840"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="481" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="120">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667175389" data-elem-id="1611667175389"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="481" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="90">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667177163" data-elem-id="1611667177163"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="480" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="60">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667182825" data-elem-id="1611667182825"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="481" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="150">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667182830" data-elem-id="1611667182830"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="480" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="180">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611667904253" data-elem-id="1611667904253"
data-elem-type="shape" data-field-top-value="212" data-field-left-value="480" data-field-height-value="120"
data-field-width-value="120" data-field-axisy-value="top" data-field-axisx-value="left"
data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px"
data-field-heightunits-value="px" data-field-widthunits-value="px" data-animate-prx="mouse"
data-animate-prx-dx="210">
<div class="tn-atom"></div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611668618020" data-elem-id="1611668618020"
data-elem-type="text" data-field-top-value="360" data-field-left-value="260" data-field-width-value="560"
data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid"
data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value=""
data-field-widthunits-value="px">
<div class="tn-atom" field="tn_text_1611668618020">С помощью данного эффекта я хотела привлечь внимание
пользователя и создать немного интерактива</div>
</div>
<div class="t396__elem tn-elem tn-elem__2739095341611668822546" data-elem-id="1611668822546"
data-elem-type="text" data-field-top-value="135" data-field-left-value="365" data-field-width-value="470"
data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid"
data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value=""
data-field-widthunits-value="px">
<div class="tn-atom" field="tn_text_1611668822546">Пошевелите мышкой вправо или влево</div>
</div>
</div>
</div>
</div>
</div>
<!--/allrecords-->
<!-- Tilda copyright. Don't remove this line -->
<div class="t-tildalabel" id="tildacopy" data-tilda-sign="2022839#16839362">
<a href="https://tilda.cc/?upm=2022839" class="t-tildalabel__link">
<div class="t-tildalabel__wrapper">
<div class="t-tildalabel__txtleft">Made on</div>
<div class="t-tildalabel__wrapimg"><img src="https://static.tildacdn.com/img/tildacopy.png"
class="t-tildalabel__img" /></div>
<div class="t-tildalabel__txtright">Tilda</div>
</div>
</a>
</div>
</body>
</html>
css:
#rec273909534 .t396__artboard {
height: 550px;
background-color: #ffffff;
}
#rec273909534 .t396__filter {
height: 550px;
}
#rec273909534 .t396__carrier {
height: 550px;
background-position: center center;
background-attachment: scroll;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width: 1199px) {
#rec273909534 .t396__artboard {}
#rec273909534 .t396__filter {}
#rec273909534 .t396__carrier {
background-attachment: scroll;
}
}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667130108"] {
z-index: 8;
top: 212px;
left: calc(50% - 600px + 480px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667130108"] .tn-atom {
border-radius: 3000px;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667170625"] {
z-index: 7;
top: 212px;
left: calc(50% - 600px + 480px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667170625"] .tn-atom {
border-radius: 3000px;
opacity: 0.8;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667173840"] {
z-index: 4;
top: 212px;
left: calc(50% - 600px + 481px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667173840"] .tn-atom {
border-radius: 3000px;
opacity: 0.4;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667175389"] {
z-index: 5;
top: 212px;
left: calc(50% - 600px + 481px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667175389"] .tn-atom {
border-radius: 3000px;
opacity: 0.6;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667177163"] {
z-index: 6;
top: 212px;
left: calc(50% - 600px + 480px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667177163"] .tn-atom {
border-radius: 3000px;
opacity: 0.7;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667182825"] {
z-index: 3;
top: 212px;
left: calc(50% - 600px + 481px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667182825"] .tn-atom {
border-radius: 3000px;
opacity: 0.2;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667182830"] {
z-index: 2;
top: 212px;
left: calc(50% - 600px + 480px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667182830"] .tn-atom {
border-radius: 3000px;
opacity: 0.1;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611667904253"] {
z-index: 1;
top: 212px;
left: calc(50% - 600px + 480px);
width: 120px;
height: 120px;
}
#rec273909534 .tn-elem[data-elem-id="1611667904253"] .tn-atom {
border-radius: 3000px;
opacity: 0.05;
background-color: #ddb600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611668618020"] {
color: #000000;
text-align: center;
z-index: 9;
top: 360px;
left: calc(50% - 600px + 260px);
width: 560px;
}
#rec273909534 .tn-elem[data-elem-id="1611668618020"] .tn-atom {
color: #000000;
font-size: 20px;
font-family: "Play", Arial, sans-serif;
line-height: 1.55;
font-weight: 400;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
#rec273909534 .tn-elem[data-elem-id="1611668822546"] {
color: #000000;
text-align: center;
z-index: 10;
top: 135px;
left: calc(50% - 600px + 365px);
width: 470px;
}
#rec273909534 .tn-elem[data-elem-id="1611668822546"] .tn-atom {
color: #000000;
font-size: 24px;
font-family: "Play", Arial, sans-serif;
line-height: 1.55;
font-weight: 600;
background-position: center center;
border-color: transparent;
border-style: solid;
}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 639px) {}
@media screen and (max-width: 479px) {}
js:
window.dataLayer = window.dataLayer || [];
if (/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent) === false && typeof sessionStorage != "undefined" && sessionStorage.getItem("visited") !== "y") {
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML =
"@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}";
document.getElementsByTagName("head")[0].appendChild(style);
$(document).ready(function () {
$(".t-records").addClass("t-records_animated");
setTimeout(function () {
$(".t-records").addClass("t-records_visible");
sessionStorage.setItem("visited", "y");
}, 400);
});
}
$(document).ready(function () {
t396_init("273909534");
});
if (!window.mainTracker) {
window.mainTracker = "tilda";
}
(function (d, w, k, o, g) {
var n = d.getElementsByTagName(o)[0],
s = d.createElement(o),
f = function () {
n.parentNode.insertBefore(s, n);
};
s.type = "text/javascript";
s.async = true;
s.key = k;
s.id = "tildastatscript";
s.src = g;
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else {
f();
}
})(document, window, "80c60033e61c9862590b1a8729f6f9fa", "script", "https://static.tildacdn.com/js/tildastat-0.2.min.js");