WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS

Developer
Size
4,546 Kb
Views
44,528

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 Previews

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&amp;url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F&amp;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/&amp;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/&amp;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&amp;url=//wp-simplicity.com/simplicity1-8-4/&amp;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);
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS - Script Codes
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS - Script Codes
Home Page Home
Developer Hidekichi
Username Hidekichi
Uploaded July 10, 2022
Rating 3
Size 4,546 Kb
Views 44,528
Do you need developer help for WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS?

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!

Hidekichi (Hidekichi) Script Codes
Create amazing blog posts 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!