<!-- Parallax move on scroll -->
<div data-tor="scroll:@parallax(40)">
<!-- Revealing effect -->
<div data-tor="inview:[scale.from(75) fade.in] quad slower" class="bg-white shadow-lg shadow-intensity-sm">
<!-- ---- -->
<!-- Hero -->
<!-- ---- -->
<div id="hero" class="row">
<!-- Title -->
<div class="col">
<h3 data-tor="inview:[fade.in pull.left(sm)] slower">Hello! Start your day with the nice reading</h3>
</div>
<!-- Icons -->
<div class="center-v">
<!-- Eye -->
<div data-tor="inview:scale.from(0) delay(0ms) slow bounce">
<div class="circle" data-tor="mouse:@parallax(5) ease-out">/div>
</div>
<!-- Circle -->
<div data-tor="inview:scale.from(0) delay(50ms) slow bounce">
<div data-tor-loop="spin slowest">...</div>
</div>
<!-- Rotate -->
<div data-tor="inview:scale.from(0) delay(100ms) slow bounce">
<div data-tor="mouseX:@T=rotateZ(0deg;180deg, {method: continuous}) ease-out">...</div>
</div>
</div>
<!-- end Icons -->
</div>
<!-- end #hero.row -->
<!-- ----- -->
<!-- Cards -->
<!-- ----- -->
<div id="cards" class="row">
<!-- Card 01 -->
<div class="col-6">
<a href="#" data-tor="hover:[push.up(sm) shadow(md) shadow-offset.down(sm)]">
<div class="overlay-gradient" data-tor="inview:reveal(right) delay(0ms) slow exponential">
<div class="overlay-content">
<h4>10 tips for better time management</h4>
</div>
<img class="..." src="..." alt="Image">
</div>
</a>
</div>
<div class="col-3 flex-column">
<!-- Card 02 -->
<a href="#" data-tor="inview:clip.right__skew(sm) delay(50ms) slow exponential">
<div class="bg-tor-violet" data-tor="hover:bg-darken(md)">
<h6 class="text-white">Marketing webinars</h6>
<div class="circle btn f.p-3 border border-white">
<i class="text-white btn-arrow"></i>
</div>
</div>
</a>
<!-- Card 03 -->
<a href="#" data-tor="inview:scale.from(0) delay(100ms) slow exponential">
<div class="overlay-gradient" data-tor="hover:[scale.to(1.1) rotate.to(2deg)]">
<div class="overlay-content">
<h6>Nice breakfast</h6>
</div>
<img class="..." src="..." alt="Image">
</div>
</a>
</div>
<!-- Card 04 -->
<div class="col-3">
<a href="#" data-tor-parent="hover">
<div class="overlay-gradient" data-tor="inview:[fade.in pull.up(sm)] slow exponential">
<div class="overlay-content align-items-end text-white p-4">
<h6>Nice breakfast</h6>
</div>
<img data-tor="hover(p):[scale.to(125%) opacity(80)] slow" class="..." src="..." alt="Image">
</div>
</a>
</div>
</div>
<!-- end #cards.row -->
</div>
<!-- ----------- -->
<!-- Decorations -->
<!-- ----------- -->
<!-- X axis mouse-based move -->
<div data-tor="mouseX:@parallax(20)">
<div class="...">px</div>
</div>
<!-- Y axis mouse-based move -->
<div data-tor="mouseY:@parallax(20)">
<div class="...">px</div>
</div>
</div>
mouse:@parallax(10)
radiate(primary)
hover:push.up(sm)
.tor-slider
.circle-md
.shadow-primary
float(1rem)
.shadow-intensity-xl
active:{fade.in scale.from(75)}
.bg-darken-xl
.btn-soft-primary
Create interactive effects that responds to user behavior. Fine-tune any effect to perfectly fit any resolution thanks to Torus Kit responsive capabilities.
MoreTorus Kit brings new components and utilities that makes workflow flawless. It also enhances some of the original Bootstrap components and utilities, too
MoreChoose from various ready-made HTML templates that fully make use of Torus Kit interaction capabilities.
More
<!-- Circle with custom value -->
<div data-tor-loop="circle(2rem)">...</div>
<!-- Jump with custom value -->
<div data-tor-loop="jump(2rem)">...</div>
<!-- Swing -->
<div data-tor-loop="swing">...</div>
<!-- Move -->
<div data-tor-loop="move.down">...</div>
<!-- Wobble vertical -->
<div data-tor-loop="wobble.v">...</div>
<!-- Spin -->
<div data-tor-loop="spin">...</div>
<!-- Blink -->
<div data-tor-loop="blink">...</div>
<!-- Pulse -->
<div data-tor-loop="pulse">...</div>
<!-- Custom placed caret -->
<div data-tor-caret="bottom start>...</div>
<!-- Animated spinner -->
<div class="spinner text-primary">...</div>
<!-- Shapes -->
<div class="circle p-7">...</div>
<!-- Torus Kit Slider -->
<div class="tor-slider">...</div>
<!-- Background color opacity -->
<div class="bg-opacity-10">...</div>
<!-- Spin -->
<div data-tor="spin">...</div>
<!-- Styled native scrollbars -->
<div class="scrollbar scrollbar-*">...</div>
<!-- Ribbons -->
<div class="ribbon ribbon-corner">...</div>
<div class="ribbon ribbon-bookmark">...</div>
<!-- Enhanced shadows -->
<div class="shadow-risen">...</div>
<div class="shadow-primary">...</div>
<div class="shadow-offset-down-md">...</div>
<!-- Overlay -->
<div class="overlay overlay-primary">...</div>
<div class="overlay-gradient">...</div>
<!-- Text opacity -->
<div class="text-opacity-*">...</div>
Choose modal animation:
.text-opacity-40
.text-opacity-60
.text-opacity-80
Torus Kit only ready made components
We've enhanced some of the Bootstrap original components
Utilities that helps you to work faster
Bootstrap utilities with some improvements