In the hero section parallax effect is used, and also a zoom out effect: http://themes.framework-y.com/codrop/music/
How can I make the zoom out effect?
In my implementation, I converted and copied HTML to JSX. It will only reduce background image size, but not zoom out, why?
What Codrop makes different?
my rendered gif implementation
import Navbar from 'tikexModule/components/Navbar'
import Footer from './Footer'
interface Props {
children?: React.ReactNode
isNavbarTransparent?: Boolean
}
const Layout = ({ children, isNavbarTransparent }: Props) => {
return (
<>
<div
className="parallax-mirror ken-burn-center"
data-source-id="section_RIZ3d"
style={{
visibility: 'hidden',
zIndex: -100,
position: 'fixed',
top: '0px',
left: '0px',
overflow: 'hidden',
transform: 'translate3d(0px, 0px, 0px)',
height: '450px',
width: '1440px',
}}
>
<img
className="parallax-slider"
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/hd-1.jpg"
style={{
transform: 'translate3d(0px, 0px, 0px)',
position: 'absolute',
left: '0px',
height: '810px',
width: '1440px',
maxWidth: 'none',
}}
/>
</div>
<div
className="parallax-mirror"
data-source-id="section_oxy7k"
style={{
visibility: 'hidden',
zIndex: -100,
position: 'fixed',
top: '0px',
left: '0px',
overflow: 'hidden',
transform: 'translate3d(0px, 0px, 0px)',
height: '595px',
width: '1440px',
}}
>
<img
className="parallax-slider"
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/hd-2.jpg"
style={{
transform: 'translate3d(0px, 0px, 0px)',
position: 'absolute',
left: '0px',
height: '810px',
width: '1440px',
maxWidth: 'none',
}}
/>
</div>
<div
className="parallax-mirror ken-burn-center"
data-source-id="section_5ZtkF"
style={{
visibility: 'visible',
zIndex: -100,
position: 'fixed',
top: '-70px',
left: '0px',
overflow: 'hidden',
transform: 'translate3d(0px, 0px, 0px)',
height: '972px',
width: '1440px',
}}
>
<img
className="parallax-slider"
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/hd-1.jpg"
style={{
transform: 'translate3d(0px, 0px, 0px)',
position: 'absolute',
top: '-131px',
left: '0px',
height: '810px',
width: '1440px',
maxWidth: 'none',
}}
/>
</div>
<div id="preloader" style={{ display: 'none' }} />
<nav
id="nav"
className="scroll-change menu-classic menu-fixed menu-transparent light align-right menu-one-page"
data-menu-anima="fade-in"
data-scroll-detect="true"
>
<div className="container">
<div className="menu-brand">
<a href="http://themes.framework-y.com/codrop/music">
<img
className="logo-default"
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/08/logo-light.svg"
alt=""
style={{}}
/>
<img
className="logo-retina"
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/08/logo-light.svg"
alt=""
style={{}}
/>
</a>
</div>
<i className="menu-btn" />
<div className="menu-cnt">
<ul id="main-menu">
<li className=" ">
<a href="#overview">Overview</a>
</li>
<li className=" ">
<a href="#pricing">Pricing</a>
</li>
<li className=" ">
<a href="#features">Features</a>
</li>
<li className=" ">
<a href="#news">News</a>
</li>
<li className=" dropdown ">
<a href="#">Pages</a>
<ul
className="dropdown-menu fade-in"
style={{
animationDuration: '250ms',
transitionTimingFunction: 'ease',
transitionDelay: '0ms',
}}
>
<li className="dropdown-submenu ">
<a href="#">Sites</a>
<ul>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/saas/">
Saas
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/fintech/">
Fintech
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/chat/">
Chat
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/sport/">
Sport
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/food/">
Food
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/music/">
Music
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/photo/">
Photo
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/travel/">
Travel
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/news/">
News
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/">
Intro
</a>
</li>
</ul>
</li>
<li className="dropdown-submenu ">
<a href="#">Pages</a>
<ul>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/intro/about-us/">
About
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/careers/">
Careers
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/faq/">
Faq
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/stories/">
Success stories
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/pricing-one/">
Pricing one
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/pricing-two/">
Pricing two
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/team/">
Team
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/shop/">
Shop
</a>
</li>
</ul>
</li>
<li className="dropdown-submenu ">
<a href="#">Blog</a>
<ul>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/intro/blog-one/">
Blog one
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/intro/blog-two/">
Blog two
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/blog/2019/09/03/who-was-the-man-wearing-the-1-3-million-watch-stolen-in-spain/">
Post
</a>
</li>
</ul>
</li>
<li className="dropdown-submenu ">
<a href="#">Contacts</a>
<ul>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/contacts-one/">
Contacts one
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/contacts-two/">
Contacts two
</a>
</li>
<li className=" ">
<a href="http://themes.framework-y.com/codrop/contacts-three/">
Contacts three
</a>
</li>
</ul>
</li>
<li className=" ">
<a
target="_blank"
href="https://templates.themekit.dev/codrop/elements/components/buttons.html"
>
Elements
</a>
</li>
</ul>
</li>
</ul>
<div className="menu-right">
<div className="menu-custom-area">
<a className="btn btn-xs btn-border btn-circle" href="#">
Download App
</a>
</div>
</div>
</div>
</div>
</nav>
<main className="footer-parallax-cnt" style={{ marginBottom: '442px' }}>
<section
id="section_5ZtkF"
className="section-image hc-cmp-section light section-bottom-layer ken-burn-center"
data-parallax="scroll"
data-natural-height={1080}
data-natural-width={1920}
data-position
data-image-src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/hd-1.jpg"
>
<div className="container ">
<div className="row">
<div
id="column_3LmOZ"
className="hc-cmp-column hc-column col-lg-12 "
style={{}}
>
<hr id="C2Ryb" className="hc-cmp-space space " />
</div>
<div
id="column_OfRKu"
className="hc-cmp-column hc-column col-lg-6 fade-in"
style={{
position: 'relative',
animationDuration: '1000ms',
transitionTimingFunction: 'ease',
transitionDelay: '0ms',
}}
data-anima
data-time={1000}
aid="0.5738936811843882"
>
<hr
id="DPLpC"
className="hc-cmp-space space-lg hidden-md "
/>
<h1 id="BdEnF" className="hc-cmp-title-tag " style={{}}>
The funny app, to share and listen your music
<span className="dot">.</span>
</h1>
<p id="9EIqX" className="hc-cmp-text-block " style={{}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboriso.
</p>
<hr id="RFBds" className="hc-cmp-space space-sm " />
<div id="57Igh" className="hc-cmp-code-block ">
<a
href="#"
className="btn btn-sm text-bold btn-circle shadow-1 full-width-sm"
>
Download now
</a>
<span className="space-sm" />
<a href="#" className="btn-text active hidden-sm">
Discover the music
</a>
</div>
<hr id="pWrRN" className="hc-cmp-space space-xs " />
</div>
<div
id="column_I8mak"
className="hc-cmp-column hc-column col-lg-6 fade-bottom"
style={{
position: 'relative',
animationDuration: '1000ms',
transitionTimingFunction: 'ease',
transitionDelay: '0ms',
}}
data-anima
data-time={1000}
aid="0.8009226736862343"
>
<hr id="Q0JeD" className="hc-cmp-space space visible-md " />
<div id="cparo" className="hc-cmp-code-block ">
</div>
</div>
</div>
</div>
</section>
<section
id="overview"
className="section-base hc-cmp-section section-color section-top-overflow "
>
<div className="container ">
<div className="row">
<div
id="column_7sXOv"
className="hc-cmp-column hc-column col-lg-12 "
style={{}}
>
<div
id="LbzXL"
className="hc-component hc-cmp-grid-list grid-list "
data-columns={4}
data-columns-lg={4}
data-columns-md={2}
data-columns-sm={2}
data-columns-xs={1}
>
<div className="grid-box">
<div className="grid-item">
<div
id="gzuB5"
className="cnt-box-top-icon cnt-box hc-cmp-content-box boxed scroll-to "
data-href="#"
>
<i className=" im-bar-chart5 " />{' '}
<div className="caption">
<h2>Real time chars</h2>
<p className>
Lorem ipsum dolor sitamet consect sed do eiusmod
tempore.
</p>{' '}
</div>
</div>
</div>
<div className="grid-item">
<div
id="ojQYr"
className="cnt-box-top-icon cnt-box hc-cmp-content-box boxed scroll-to "
data-href="#"
>
<i className=" im-cool-guy " />{' '}
<div className="caption">
<h2>Premium support</h2>
<p className>
Lorem ipsum dolor sitamet consect sed do eiusmod
tempore.
</p>{' '}
</div>
</div>
</div>
<div className="grid-item">
<div
id="LrssQ"
className="cnt-box-top-icon cnt-box hc-cmp-content-box boxed scroll-to "
data-href="#"
>
<i className=" im-laptop-3 " />{' '}
<div className="caption">
<h2>Cross platform</h2>
<p className>
Lorem ipsum dolor sitamet consect sed do eiusmod
tempore.
</p>{' '}
</div>
</div>
</div>
<div className="grid-item">
<div
id="D1I6L"
className="cnt-box-top-icon cnt-box hc-cmp-content-box boxed scroll-to "
data-href="#"
>
<i className=" im-security-settings " />{' '}
<div className="caption">
<h2>Security features</h2>
<p className>
Lorem ipsum dolor sitamet consect sed do eiusmod
tempore.
</p>{' '}
</div>
</div>
</div>
</div>
</div>
<hr
id="8VOJz"
className="hc-cmp-space space-lg hidden-md "
/>
<hr id="YF7SG" className="hc-cmp-space space visible-md " />
</div>
<div
id="column_Z7CiC"
className="hc-cmp-column hc-column col-lg-12 align-items-center "
style={{}}
>
<div
id="column_NpKFs"
className="hc-cmp-column hc-column col-lg-6 col-md-6 fade-left"
style={{
position: 'relative',
animationDuration: '1000ms',
transitionTimingFunction: 'ease',
transitionDelay: '0ms',
}}
data-anima
data-time={1000}
aid="0.9379847219203462"
>
<h2 id="mzEAU" className="hc-cmp-title-tag " style={{}}>
Social features to share <br />
your favorite songs and playlists
<span className="dot">.</span>
</h2>
<p id="sleBF" className="hc-cmp-text-block " style={{}}>
Lorem ipsum dolor sit ametno sea takimata sanctus est Lorem
ipsum dolor sit amete. Ut enim ad minim veniam, quis nostrud
exercitation ullamco sea takimata sanctus eslaboriso. Aipsum
dolor sit amete sanctus artequis nostrud exercitation
ullamco sea tassa.
</p>
<a
id="XpodR"
className="hc-cmp-button btn-text scroll-to "
href="#"
>
Explore services
</a>
</div>
<div
id="column_chXnp"
className="hc-cmp-column hc-column col-lg-6 col-md-6 fade-right"
style={{
position: 'relative',
animationDuration: '1000ms',
transitionTimingFunction: 'ease',
transitionDelay: '0ms',
}}
data-anima
data-time={1000}
aid="0.17285515585305034"
>
<div
id="QWFUs"
className="hc-component hc-cmp-image-grid-list grid-list grid-wall-1 list-gallery"
data-columns={2}
data-columns-lg={2}
data-columns-md={2}
data-columns-sm={2}
data-columns-xs={2}
data-lightbox-anima="fade-top"
>
<div className="grid-box">
<div className="grid-item">
<a
className="img-box img-scale"
href="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-15.jpg"
>
<img
alt=""
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-15.jpg"
style={{}}
/>
</a>
</div>
<div className="grid-item">
<a
className="img-box img-scale"
href="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-11.jpg"
>
<img
alt=""
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-11.jpg"
style={{}}
/>
</a>
</div>
<div className="grid-item">
<a
className="img-box img-scale"
href="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-7.jpg"
>
<img
alt=""
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-7.jpg"
style={{}}
/>
</a>
</div>
<div className="grid-item">
<a
className="img-box img-scale"
href="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-5.jpg"
>
<img
alt=""
src="http://themes.framework-y.com/codrop/music/wp-content/uploads/sites/7/2019/09/image-5.jpg"
style={{}}
/>
</a>
</div>
</div>
</div>
</div>
</div>
<div
id="column_IoIkW"
className="hc-cmp-column hc-column col-lg-12 "
style={{}}
>
<hr
id="SbfM5"
className="hc-cmp-space space-lg hidden-md "
/>
</div>
<div
id="column_GVc3l"
className="hc-cmp-column hc-column col-lg-12 align-items-center "
style={{}}
>
<div
id="column_BRP18"
className="hc-cmp-column hc-column col-lg-6 col-md-6 "
style={{ opacity: 0 }}
data-anima="fade-left"
data-time={1000}
>
<div id="DF3xr" className="hc-cmp-code-block ">
</div>
</div>
<div
id="column_ic4cg"
className="hc-cmp-column hc-column col-lg-6 col-md-6 "
style={{ opacity: 0 }}
data-anima="fade-right"
data-time={1000}
>
<h2 id="dZZau" className="hc-cmp-title-tag " style={{}}>
Trusted by international <br />
artists from all over the world
<span className="dot">.</span>
</h2>
<p id="hTtlb" className="hc-cmp-text-block " style={{}}>
Lorem ipsum dolor sit ametno sea takimata sanctus est Lorem
ipsum dolor sit amete. Ut enim ad minim veniam, quis nostrud
exercitation ullamco sea takimata sanctus eslaboriso. Aipsum
dolor sit amete sanctus artequis nostrud exercitation
ullamco sea tassa.
</p>
<a
id="yA7P2"
className="hc-cmp-button btn-text scroll-to "
href="#"
>
Explore services
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<i className="scroll-top-btn scroll-top show" />
<footer id="footer" className="align-left light footer-parallax">
<div className="container">
<div className="row">
<div className="col-lg-3">
<h4>Company and team</h4>
<div className="menu-inner menu-inner-vertical">
<ul>
<li>
<a href="#">Company details and team</a>
</li>
<li>
<a href="#">News and blog</a>
</li>
<li>
<a href="#">Press area</a>
</li>
<li>
<a href="#">Affiliates and marketing</a>
</li>
</ul>
</div>
</div>
<div className="col-lg-3">
<h4>Help and support</h4>
<div className="menu-inner menu-inner-vertical">
<ul>
<li>
<a href="#">Help centre</a>
</li>
<li>
<a href="#">Feedbacks</a>
</li>
<li>
<a href="#">Request new features</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</div>
</div>
<div className="col-lg-3">
<h4>Learn more</h4>
<div className="menu-inner menu-inner-vertical">
<ul>
<li>
<a href="#">Apps stores</a>
</li>
<li>
<a href="#">Partners</a>
</li>
<li>
<a href="#">Privacy and terms</a>
</li>
</ul>
</div>
</div>
<div className="col-lg-3">
<h4>Follow us</h4>
<div className="icon-links icon-social icon-links-grid social-colors">
<a className="facebook" target="_blank" rel="nofollow" href="#">
<i className="icon-facebook" />
</a>
<a className="twitter" target="_blank" rel="nofollow" href="#">
<i className="icon-twitter" />
</a>
<a
className="instagram"
target="_blank"
rel="nofollow"
href="#"
>
<i className="icon-instagram" />
</a>
<a className="youtube" target="_blank" rel="nofollow" href="#">
<i className="icon-youtube" />
</a>
<a className="linkedin" target="_blank" rel="nofollow" href="#">
<i className="icon-linkedin" />
</a>
</div>
</div>
</div>
</div>
<div className="footer-bar">
<div className="container">
<span>
© Codrop LTD 2019. Codrop is a powerful Landing Page App Template
built with
<a target="_blank" href="https://themekit.dev/code/">
Themekit
</a>
by the
<a target="_blank" href="https://schiocco.com/">
Schiocco
</a>
Team.
</span>
<span>
<img
src="http://themes.framework-y.com/codrop/wp-content/uploads/sites/2/2019/08/logo-light.svg"
alt=""
/>
</span>
</div>
</div>
</footer>
</>
)
}
export default Layout
CodePudding user response：
There is mainly 2 different ways, using either animation or transition.
animation is normally better when one want something running all the time, and transition is more efficient for e.g. hover effects.
Here is a start using animation.
Stack snippet
html, body {
height: 100%;
margin: 0
}
@keyframes breath {
0% { background-size: 100% auto; }
50% { background-size: 140% auto; }
100% { background-size: 100% auto; }
}
#bkg{
width: 100%;
height: 100%;
animation: breath 4s linear infinite;
background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat;
}<div id="bkg"></div>CodePudding user response：
He has an initial zoom value of 1.2, then zooms out to 1 in his ken-burn-in animation that spans 10 seconds. Extracted to show below:
.ken-burn-center > img {
animation: ken-burn-in 10s;
transform: scale(1.2);
}
@keyframes ken-burn-in {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}