コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jquery_jquery で実装された全画面切り替え効果

WBOY
リリース： 2016-05-16 16:36:26
オリジナル
1316 人が閲覧しました

今日はjqueryで実装した全画面切り替えエフェクトをお届けします。右側に小さな丸いマークがあり、クリックするごとに1つの画面に切り替わります。もちろん、マウスをスクロールしてページを切り替えることもできます。効果はとても良いです。効果を見てみましょう

ソースコードのダウンロード

HTML コード: 

<div class="wrapper active-page4">
<div class="page page1">
<h2>
First page</h2>
</div>
<div class="page page2">
<h2>
Second page</h2>
</div>
<div class="page page3">
<h2>
Third page</h2>
</div>
<div class="page page4">
<h2>
Fourth page</h2>
</div>
</div>
<div class="nav-panel">
<div class="scroll-btn up">
</div>
<div class="scroll-btn down">
</div>
<nav>
<ul>
<li data-target="1" class="nav-btn nav-page1"></li>
<li data-target="2" class="nav-btn nav-page2"></li>
<li data-target="3" class="nav-btn nav-page3"></li>
<li data-target="4" class="nav-btn nav-page4 active"></li>
</ul>
</nav>
</div>
ログイン後にコピー

CSSコード: 

*, *:before, *:after
{
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.inner, .nav-panel ul .nav-btn:after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
}

html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}

@media (max-width: 767px)
{
body
{
font-size: 70%;
}
}

.wrapper
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-webkit-perspective: 3000;
perspective: 3000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper .page
{
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateX(180deg) scale(0.3);
transform: rotateX(180deg) scale(0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
will-change: transform;
}
.wrapper .page h2
{
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
}
.wrapper .page.page1
{
background-color: #66a6b8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #66a6b8), color-stop(80%, #5471B9));
background-image: -webkit-linear-gradient(-280deg, #66a6b8 20%, #5471B9 80%);
background-image: -webkit-linear-gradient(80deg, #66a6b8 20%, #5471B9 80%);
background-image: linear-gradient(10deg,#66a6b8 20%, #5471B9 80%);
}
.wrapper .page.page2
{
background-color: #f29c54;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f29c54), color-stop(100%, #DB4367));
background-image: -webkit-linear-gradient(-315deg, #f29c54 0%, #DB4367 100%);
background-image: -webkit-linear-gradient(45deg, #f29c54 0%, #DB4367 100%);
background-image: linear-gradient(45deg,#f29c54 0%, #DB4367 100%);
}
.wrapper .page.page3
{
background-color: #23af56;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23af56), color-stop(100%, #67A79A));
background-image: -webkit-linear-gradient(-405deg, #23af56 0%, #67A79A 100%);
background-image: -webkit-linear-gradient(315deg, #23af56 0%, #67A79A 100%);
background-image: linear-gradient(135deg,#23af56 0%, #67A79A 100%);
}
.wrapper .page.page4
{
background-color: #412F2F;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);
}
.wrapper.active-page1
{
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page2
{
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page3
{
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page4
{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page5
{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page6
{
-webkit-transform: translateY(-500%);
-ms-transform: translateY(-500%);
transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page7
{
-webkit-transform: translateY(-600%);
-ms-transform: translateY(-600%);
transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page8
{
-webkit-transform: translateY(-700%);
-ms-transform: translateY(-700%);
transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page9
{
-webkit-transform: translateY(-800%);
-ms-transform: translateY(-800%);
transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page10
{
-webkit-transform: translateY(-900%);
-ms-transform: translateY(-900%);
transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.nav-panel
{
position: fixed;
top: 50%;
right: 1em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
will-change: transform, opacity;
}
.nav-panel.invisible
{
opacity: 0;
-webkit-transform: translateY(-50%) scale(0.5);
-ms-transform: translateY(-50%) scale(0.5);
transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
list-style-type: none;
}
.nav-panel ul .nav-btn
{
position: relative;
overflow: hidden;
width: 1em;
height: 1em;
margin-bottom: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
cursor: pointer;
-webkit-transition: border-color, -webkit-transform 0.3s;
transition: border-color, transform 0.3s;
will-change: border-color, transform;
}
.nav-panel ul .nav-btn:after
{
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
transform: translateX(-50%) translateY(-50%) scale(0.3);
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform, opacity 0.3s;
transition: transform, opacity 0.3s;
will-change: transform, opacity;
}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after
{
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
border-color: yellow;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
background-color: yellow;
}
.nav-panel .scroll-btn
{
position: absolute;
left: 0;
width: 1em;
height: 1em;
border: 0.2em solid #fff;
border-left: none;
border-bottom: none;
cursor: pointer;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
top: -1.6em;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
bottom: -1.2em;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
border-color: yellow;
}
ログイン後にコピー

js コード: 

'use strict';
$(document).ready(function () {
var $wrap = $(".wrapper"),
pages = $(".page").length,
scrolling = false,
currentPage = 1,
$navPanel = $(".nav-panel"),
$scrollBtn = $(".scroll-btn"),
$navBtn = $(".nav-btn");

/*****************************
***** NAVIGATE FUNCTIONS *****
*****************************/
function manageClasses() {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + currentPage);
$navBtn.removeClass("active");
$(".nav-btn.nav-page" + currentPage).addClass("active");
$navPanel.addClass("invisible");
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}

function navigateDown() {
if (currentPage < pages) {
currentPage++;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}

/*********************
***** MOUSEWHEEL *****
*********************/
$(document).on("mousewheel DOMMouseScroll", function (e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});

/**************************
***** RIGHT NAVIGATION ****
**************************/

/* NAV UP/DOWN BTN PAGE NAVIGATION */
$(document).on("click", ".scroll-btn", function () {
if ($(this).hasClass("up")) {
navigateUp();
} else {
navigateDown();
}
});

/* NAV CIRCLE DIRECT PAGE BTN */
$(document).on("click", ".nav-btn", function () {
if (!scrolling) {
var target = $(this).attr("data-target");
if (Modernizr.csstransforms) {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + target);
$navBtn.removeClass("active");
$(this).addClass("active");
$navPanel.addClass("invisible");
currentPage = target;
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
} else {
$wrap.animate({ "top": "-" + ((target - 1) * 100) + "%" }, 1000);
}
}
});

}); //@ sourceURL=pen.js
ログイン後にコピー
関連ラベル：
スイッチ
ソース：php.cn
前の記事：JavaScript は配列の Push メソッドを使用して、sort_javascript の簡単なスキルを完成させます。 次の記事：Javascript_javascriptスキルにおけるデフォルトパラメータ値の設定例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
MERN スタックの検索ボックスとチェックボックスの正規表現フィルター 私は実行しながら学習することで MERN スタックがどのように連携するかを理解しようとしており、bezcoder の次のチュートリアルに従っています: Node.js/Expres...
から 2024-04-06 14:53:12
0
1
425
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート