Next Effect

Size
6,388 Kb
Views
44,528

How do I make an next effect?

What is a next effect? How do you make a next effect? This script and codes were developed by Özgür Sağıroğlu on 13 August 2022, Saturday.

Next Effect Previews

Next Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Next Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #f1f1f1; font-family: "Open Sans";
}
section { width: 500px; margin: 50px auto;
}
h1 { display: inline-block;
}
#next { display: inline-block; float: right; line-height: 85px; font-size: 20px; color: #36c; text-decoration: none;
}
article { font-size: 20px; color: #454545; -moz-transition: opacity 1000ms; -o-transition: opacity 1000ms; -webkit-transition: opacity 1000ms; transition: opacity 1000ms;
}
article:not(.current) { opacity: 0;
}
article.ok span { position: absolute;
}
article.mute span.mute { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
article span { display: inline-block; -moz-transition-property: top, left, opacity; -o-transition-property: top, left, opacity; -webkit-transition-property: top, left, opacity; transition-property: top, left, opacity; -moz-transition-duration: 1000ms; -o-transition-duration: 1000ms; -webkit-transition-duration: 1000ms; transition-duration: 1000ms;
}
article span.mute { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3;
}
footer { position: absolute; top: 550px; left: 0; width: 100%; text-align: center;
}
footer > a { font-size: 12px; color: #a0a0a0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<section> <div> <h1>Next Effect</h1><a id="next" href="#">Next &raquo;</a> </div> <article class="#{ ind == 0 ? 'current':'' }">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in risus quis quam mollis egestas vitae in mi. Sed euismod ut quam eu ultricies. Curabitur id nunc rutrum, ultricies massa vel, tincidunt nisl. Maecenas ac dui ornare, fermentum orci sit amet, ultrices metus. Maecenas ac ullamcorper augue. Proin sapien nunc, condimentum eget blandit at, congue non leo. Curabitur ullamcorper mi eros, id scelerisque quam egestas et. Aliquam egestas, leo ac viverra mollis, elit ipsum egestas justo, id faucibus metus dui sed elit. Pellentesque sed libero nec nibh dignissim tincidunt a vel est. Aenean blandit augue quis turpis ultrices convallis.</article> <article class="#{ ind == 0 ? 'current':'' }">Quisque tincidunt libero eros, et vulputate tortor sagittis non. Duis ullamcorper tortor ut tortor varius consequat. Vivamus suscipit consectetur fringilla. Etiam tristique porta elit id lacinia. Nam porta viverra adipiscing. Nullam gravida fermentum odio at ultrices. Cras et massa massa. Nam ligula mi, dignissim sit amet lectus eget, accumsan egestas metus. Aenean euismod id neque eget eleifend. Aliquam elementum blandit magna, a dapibus ipsum hendrerit vel. Duis ornare, lectus ut lobortis eleifend, ligula purus varius massa, a dictum tortor nulla eget massa. Sed sed augue a nunc faucibus lacinia sed vitae tortor. Curabitur non congue nisl, ac sodales erat. Morbi purus tortor, viverra vitae diam et, interdum dictum lectus. Donec at lacus est.</article> <article class="#{ ind == 0 ? 'current':'' }">Suspendisse nec metus adipiscing justo vehicula suscipit. Integer et ultrices erat. Duis id mauris dapibus, vulputate libero at, condimentum urna. Maecenas sed pretium quam. In nec molestie turpis. Donec vel rhoncus diam. Quisque at vehicula eros. Cras turpis nisl, commodo nec tincidunt ac, feugiat vitae risus. Nunc sit amet gravida lectus, quis pellentesque sem.</article>
</section>
<footer><a href="https://twitter.com/ozgursagiroglu">@ozgursagiroglu</a></footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Next Effect - Script Codes CSS Codes

body { background: #f1f1f1; font-family: "Open Sans";
}
section { width: 500px; margin: 50px auto;
}
h1 { display: inline-block;
}
#next { display: inline-block; float: right; line-height: 85px; font-size: 20px; color: #36c; text-decoration: none;
}
article { font-size: 20px; color: #454545; -moz-transition: opacity 1000ms; -o-transition: opacity 1000ms; -webkit-transition: opacity 1000ms; transition: opacity 1000ms;
}
article:not(.current) { opacity: 0;
}
article.ok span { position: absolute;
}
article.mute span.mute { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
article span { display: inline-block; -moz-transition-property: top, left, opacity; -o-transition-property: top, left, opacity; -webkit-transition-property: top, left, opacity; transition-property: top, left, opacity; -moz-transition-duration: 1000ms; -o-transition-duration: 1000ms; -webkit-transition-duration: 1000ms; transition-duration: 1000ms;
}
article span.mute { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3;
}
footer { position: absolute; top: 550px; left: 0; width: 100%; text-align: center;
}
footer > a { font-size: 12px; color: #a0a0a0;
}

Next Effect - Script Codes JS Codes

(function() { $(function() { var $articles; $articles = $('article'); $articles.each(function() { var $self, i, len, newText, ref, word; $self = $(this); newText = ''; ref = $self.text().split(' '); for (i = 0, len = ref.length; i < len; i++) { word = ref[i]; newText += "<span data-value='" + word + "'>" + word + "</span> "; } return $self.html(newText); }); $articles.each(function() { $(this).find('span').each(function() { var $offset, $self; $self = $(this); $offset = $self.offset(); return $self.css({ top: $offset.top, left: $offset.left, width: $self.width(), height: $self.height() }).attr({ 'data-offset-y': $offset.top, 'data-offset-x': $offset.left }); }); return $(this).addClass('ok'); }); return $('#next').click(function(e) { var $current, $nextPage; $current = $articles.filter('.current'); $nextPage = (next = $current.next('article')).length ? next : $articles.eq(0); $current.find('span').addClass('mute'); $nextPage.find('span').each(function() { var $elem, $self, $selfOffset, $value; $self = $(this); $value = $self.data('value'); if (($elem = $current.find("span[data-value='" + $value + "']:not(.set)")).length) { $selfOffset = $self.offset(); return $elem.eq(0).css({ top: $selfOffset.top, left: $selfOffset.left }).addClass('set').removeClass('mute'); } }); $current.addClass('mute'); setTimeout(function() { $current.removeClass('current'); $nextPage.addClass('current'); return setTimeout(function() { return $current.removeClass('mute').find('span').removeClass().each(function() { var $self; $self = $(this); return $self.css({ left: $self.data('offset-x'), top: $self.data('offset-y') }); }); }, 1000); }, 1100); return e.preventDefault(); }); });
}).call(this);
Next Effect - Script Codes
Next Effect - Script Codes
Home Page Home
Developer Özgür Sağıroğlu
Username ozgursagiroglu
Uploaded August 13, 2022
Rating 4.5
Size 6,388 Kb
Views 44,528
Do you need developer help for Next Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Özgür Sağıroğlu (ozgursagiroglu) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!