Skip to content

Commit c634ca3

Browse files
yama-devyama-dev
committed
adjust sample page
1 parent 3870984 commit c634ca3

File tree

2 files changed

+79
-61
lines changed

2 files changed

+79
-61
lines changed

‎examples/bg.jpg‎

460 KB
Loading

‎examples/simple.html‎

Lines changed: 79 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,45 @@
2020
gtag('js', new Date());
2121
gtag('config', 'UA-91619969-3');
2222
</script>
23+
24+
<style>
25+
.is-intersect {
26+
}
27+
[data-sem-intersect-item] {
28+
transition: all 0.2s ease 0s;
29+
transform: translateX(20px);
30+
opacity: 0;
31+
}
32+
.is-intersect [data-sem-intersect-item].is-active {
33+
transform: translateX(0);
34+
opacity: 1;
35+
}
36+
37+
38+
.intersect-wrap {
39+
position: relative;
40+
}
41+
.intersect-bg {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100vh;
47+
background: url(./bg.jpg) bottom center no-repeat;
48+
background-size: cover;
49+
opacity: 0.4;
50+
}
51+
.is-intersect .intersect-bg {
52+
position: fixed;
53+
}
54+
.is-intersect-over .intersect-bg {
55+
top: auto;
56+
bottom: 0;
57+
}
58+
</style>
2359
</head>
2460
<body style="overflow-x:hidden;">
25-
<div class="container mt-4">
61+
<div class="container container-fluid mt-4" style="max-width: 100%; padding: 0;">
2662

2763
<h2 class="mb-3">SCROLL EFFECT MODULE</h2>
2864

@@ -39,54 +75,27 @@ <h3>Advanced Use</h3>
3975
&lt;div class=&quot;js-scroll&quot;&gt;&lt;/div&gt;
4076

4177
&lt;script&gt;
42-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
43-
elem : &#039;.js-scroll&#039;,
44-
firstElem : &#039;.js-scroll--first&#039;,
45-
46-
displayRatio : 0.8,
47-
displayReverse : true,
48-
49-
firstDelay : 0,
50-
firstDelaySteps : 100,
51-
52-
autoStart : true,
53-
54-
addClassNameActive : &#039;is-active&#039;,
55-
56-
on: {
57-
Scroll: function(top){
58-
console.log(&#039;Scroll&#039;, top);
59-
},
60-
Change: function(item, pos, obj, top){
61-
console.log(&#039;Change&#039;, item, pos, obj, top);
62-
},
63-
In: function(item, pos, obj, top){
64-
console.log(&#039;In&#039;, item, pos, obj, top);
65-
},
66-
Out: function(item, pos, obj, top){
67-
console.log(&#039;Out&#039;, item, pos, obj, top);
68-
}
69-
}
70-
});
7178
&lt;/script&gt;</code>
7279
</pre>
7380

7481
<script>
7582
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
83+
// scroll option
7684
elem : '.js-scroll',
7785
firstElem : '.js-scroll--first',
78-
7986
displayRatio : 0.5,
8087
displayReverse : true,
8188
displayRatioReverse: 0.9,
82-
8389
firstDelay : 0,
8490
firstDelaySteps : 100,
85-
8691
autoStart : true,
87-
8892
addClassNameActive : 'is-active',
8993

94+
// intersect optioon.
95+
throttleInterval : 10,
96+
intersect : true,
97+
addClassNameIntersect : 'is-intersect',
98+
9099
on: {
91100
Scroll: function(top){
92101
// console.log('Scroll', top);
@@ -99,49 +108,58 @@ <h3>Advanced Use</h3>
99108
},
100109
Out: function(item, pos, obj, top){
101110
// console.log('Out', item, pos, obj, top);
111+
},
112+
Intersect: function(obj){
113+
// console.log(obj);
102114
}
103115
}
104116
});
105117
</script>
106-
107-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
108-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
109-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
110-
111118
</div>
112119

113120
<hr>
114121

115-
<div class="p-use">
116-
<h3>Advanced Use (Acceleration)</h3>
117-
<pre class="prettyprint lang-html">
118-
<code>
119-
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
120-
&lt;script&gt;
121-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
122-
acceleration : true,
123-
on: {
124-
Acceleration: function(num){
125-
console.log(&#039;Acceleration&#039;, num);
126-
}
127-
}
128-
});
129-
&lt;/script&gt;</code>
130-
</pre>
122+
<div class="p-demo">
131123

132-
</div>
124+
<h3>DEMO</h3>
125+
<br><br><br><br><br><br><br><br><br><br><br><br>
126+
<br><br><br><br><br><br><br><br><br><br><br><br>
127+
<br><br><br><br><br><br><br><br><br><br><br><br>
128+
<br><br><br><br><br><br><br><br><br><br><br><br>
133129

134-
<hr>
135-
<div class="p-demo">
130+
<div class="js-scroll intersect-wrap" data-sem-slug="test111" style="border: 1px solid rgba(0,0,0,0.5);">
131+
<div class="intersect-bg"></div>
132+
<h2>Effect</h2>
133+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
134+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
135+
<p>1</p>
136+
</div>
137+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
138+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
139+
<p>2</p>
140+
</div>
141+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
142+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
143+
<p>3</p>
144+
</div>
145+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
146+
</div>
136147

148+
<br><br><br><br><br><br><br><br><br><br><br><br>
149+
<br><br><br><br><br><br><br><br><br><br><br><br>
150+
<br><br><br><br><br><br><br><br><br><br><br><br>
151+
<br><br><br><br><br><br><br><br><br><br><br><br>
137152
<h3>DEMO</h3>
138153
<br><br><br><br><br><br><br><br><br><br><br><br>
139154
<br><br><br><br><br><br><br><br><br><br><br><br>
140155
<br><br><br><br><br><br><br><br><br><br><br><br>
141156
<br><br><br><br><br><br><br><br><br><br><br><br>
142-
<div class="js-scroll js-scroll__fadein-basic text-center">
143-
<h2>EffectType : fadein basic</h2>
144-
<p>EffectClassname : .js-scroll__fadein-basic</p>
157+
<div class="js-scroll js-scroll__fadein-basic text-center" data-sem-slug="test222" style="opacity: 0.5 !important; border: 1px solid rgba(0,0,0,0.5);">
158+
<h2>Effect</h2>
159+
<br><br><br><br><br><br><br><br><br><br><br><br>
160+
<br><br><br><br><br><br><br><br><br><br><br><br>
161+
<br><br><br><br><br><br><br><br><br><br><br><br>
162+
<br><br><br><br><br><br><br><br><br><br><br><br>
145163
</div>
146164
<br><br><br><br><br><br><br><br><br><br><br><br>
147165
<br><br><br><br><br><br><br><br><br><br><br><br>

0 commit comments

Comments
 (0)