WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS
- WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS Previews
- WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS HTML Codes
- WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS CSS Codes
- WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS JS Codes
How do I make an wordpresstheme simplicity sns count the count up automatically the count value of the sns?
If there is an element in the view, and count up automatically the count value of the SNSTranslated by Google Translation. What is a wordpresstheme simplicity sns count the count up automatically the count value of the sns? How do you make a wordpresstheme simplicity sns count the count up automatically the count value of the sns? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wordpressTheme Simplicity SNS count The count up automatically the count value of the SNS</title> <link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity-child-simplicity/style.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dummy"><span>Please scroll up and down to find the SNS counter</span></div>
<div id="sns-group-top" class="sns-group sns-group-top"> <div class="sns-buttons sns-buttons-pc"> <p class="sns-share-msg">シェアする</p> <ul class="snsb snsb-balloon clearfix"> <li class="balloon-btn twitter-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//twitter.com/search?q=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow"> <span class="social-count twitter-count">7</span> </a> </span> <a href="//twitter.com/share?text=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82&url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F&related=MrYhira" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow"> <span class="icon-twitter"></span> </a> </span> </li> <li class="balloon-btn facebook-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&t=Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。" target="blank" class="arrow-box-link facebook-arrow-box-link" rel="nofollow"> <span class="social-count facebook-count">13</span> </a> </span> <a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&t=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82" target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow"> <span class="icon-facebook"></span> </a> </span> </li> <li class="balloon-btn googleplus-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="arrow-box-link googleplus-arrow-box-link" rel="nofollow"> <span class="social-count googleplus-count">2</span> </a> </span> <a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="balloon-btn-link googleplus-balloon-btn-link" rel="nofollow"> <span class="icon-googleplus"></span> </a> </span> </li> <li class="balloon-btn hatena-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//b.hatena.ne.jp/entry/wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link hatena-arrow-box-link" rel="nofollow"> <span class="social-count hatebu-count">1</span> </a> </span> <a href="//b.hatena.ne.jp/add?mode=confirm&url=//wp-simplicity.com/simplicity1-8-4/&title=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82" target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow"> <span class="icon-hatena"></span> </a> </span> </li> <li class="balloon-btn pocket-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link pocket-arrow-box-link" rel="nofollow"> <span class="social-count pocket-count">6</span> </a> </span> <a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow"> <span class="icon-pocket"></span> </a> </span> </li> <li class="balloon-btn evernote-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/', providerName:'Simplicity', title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。', contentId:'the-content', }); return false;" target="blank" class="arrow-box-link evernote-arrow-box-link" rel="nofollow"> CLIP! </a> </span> <a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/', providerName:'Simplicity', title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。', contentId:'the-content', }); return false;" target="blank" class="balloon-btn-link evernote-balloon-btn-link" rel="nofollow"> <span class="icon-evernote"></span> </a> </span> </li> <li class="balloon-btn feedly-balloon-btn"> <span class="balloon-btn-set"> <span class="arrow-box"> <a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="arrow-box-link feedly-arrow-box-link" rel="nofollow"> <span class="social-count feedly-count">277</span> </a> </span> <a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="balloon-btn-link feedly-balloon-btn-link" rel="nofollow"> <span class="icon-feedly"></span> </a> </span> </li> </ul> </div>
</div>
<div class="dummy"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS - Script Codes CSS Codes
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Boogaloo);
.dummy { height: 1500px; position: relative;
}
.dummy span { display: block; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#sns-group-top .evernote-balloon-btn { display: block;
}
/*以下、codepen表示中のconsole上でエラーが出るため仮設*/
@font-face { font-family: Boogaloo;
}
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS - Script Codes JS Codes
(function($) { function countup(tgt) { /* * http://codepen.io/shivasurya/pen/FatiB * durationでどれぐらいの時間をかけて表示するか設定 */ tgt.each(function() { $(this) .prop('Counter', 0) .animate({ Counter: $(this).text() }, { duration: 2000, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now)); }, // Hidekichi original // callbackでカウンタにクラスを付ける complete: function() { $(this).addClass("finish"); } }); }); } /* * 画面内に目的の要素があるか判別する関数 */ function view(target) { var wHeight = $(window).height(), tgtOffset = target.offset().top, tgtHeight = target.height(), hitover = tgtOffset + tgtHeight, timer = null; //ウィンドウがロード・スクロール・リサイズの時に発動 $(window).on("load scroll resize", function() { var st = $(window).scrollTop(), hit = st + wHeight; if (timer) clearTimeout(timer); timer = setTimeout(function() { //目的の要素が画面内にある時 if (tgtOffset < hit && hitover > st) { //finishクラスがある時は実行しない if (!target.hasClass("finish") && !target.is(":animated")) { countup(target); } } else { //画面外に消えたらfinishクラス除去 target.removeClass("finish"); } }, 100); }); //scroll end } /* * 実行部分 */ $(function() { var tgt = $(".social-count"); view(tgt); });
})(jQuery);
Developer | Hidekichi |
Username | Hidekichi |
Uploaded | July 10, 2022 |
Rating | 3 |
Size | 4,546 Kb |
Views | 44,528 |
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!
Name | Size |
WordpressThemeSimplicity SNS button applied to Simplicity | 6,883 Kb |
A Pen by Hidekichi | 7,502 Kb |
WordpressTheme Simplicity title position fixed | 6,861 Kb |
Wordpress theme Simplicity eye-catch image idea | 3,364 Kb |
WordpressTheme Simplicity menu idea | 6,271 Kb |
WordpressTheme Simplicity 1column idea | 18,732 Kb |
Wordpress theme Simplicity list style flex | 7,051 Kb |
WordpressTheme Simplicity sns button setting | 9,369 Kb |
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!
Name | Username | Size |
Weather App 2 | MightyJoeW | 2,877 Kb |
SVG Animation | Pollardld | 3,133 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Sticky div | Kaslab | 2,225 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!