Skip to content

Commit 2405c73

Browse files
frankpaganfrankpagan
committed
fix: removed data- from parallax attributes
1 parent 537da79 commit 2405c73

File tree

4 files changed

+27
-27
lines changed

4 files changed

+27
-27
lines changed

‎demo/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<div data-main_content_id="content">
2626

27-
<div class="parallax height:300px" data-parallax_src="https://www.w3schools.com/howto/img_parallax.jpg" >
27+
<div class="parallax height:300px" parallax-src="https://www.w3schools.com/howto/img_parallax.jpg" >
2828
<div class="caption">
2929
<span class="border">SCROLL DOWN</span>
3030
</div>
@@ -35,7 +35,7 @@ <h3 style="text-align:center;">Parallax Demo</h3>
3535
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
3636
</div>
3737

38-
<div class="parallax" data-parallax_src="https://www.w3schools.com/howto/img_parallax2.jpg" data-parallax_height="300px">
38+
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg" parallax-height="300px">
3939
<div class="caption">
4040
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
4141
</div>
@@ -47,7 +47,7 @@ <h3 style="text-align:center;">Parallax Demo</h3>
4747
</div>
4848
</div>
4949

50-
<div class="parallax" data-parallax_src="https://www.w3schools.com/howto/img_parallax2.jpg" data-parallax_height="300px">
50+
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg" parallax-height="300px">
5151
<div class="caption">
5252
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
5353
</div>
@@ -59,7 +59,7 @@ <h3 style="text-align:center;">Parallax Demo</h3>
5959
</div>
6060
</div>
6161

62-
<div class="parallax" data-parallax_src="https://www.w3schools.com/howto/img_parallax.jpg" data-parallax_height="300px">
62+
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax.jpg" parallax-height="300px">
6363
<div class="caption">
6464
<span class="border">COOL!</span>
6565
</div>

‎docs/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<body>
2121

22-
<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" collection="components" document_id="60395ef42b3ac232657040fd"
22+
<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="components" document_id="60395ef42b3ac232657040fd"
2323
name="html">
2424
</nav>
2525
<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
@@ -32,23 +32,23 @@
3232
<h2>CoCreate-parallax</h2>
3333
</div>
3434
<div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
35-
<div class="display:flex align-items:center transition:0.3s padding-left:10px" data-share_network="true" data-share_text="A stunning css effect in which the background moves at a slower pace than the foreground. Resulting in 3D effect when users scroll up/down the webpage."
36-
data-share_title="CoCreate-parallax" data-share_height="600" data-share_width="700" data-share_media="https://cdn.cocreate.app/docs/parallax.png" data-hover="display:block!important" data-hover_target=".social-networks">
35+
<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="A stunning css effect in which the background moves at a slower pace than the foreground. Resulting in 3D effect when users scroll up/down the webpage."
36+
share-title="CoCreate-parallax" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/parallax.png" data-hover="display:block!important" hover-target=".social-networks">
3737
<div class="display:none social-networks">
38-
<a class="margin-right:15px" data-share_network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
39-
<a class="margin-right:15px" data-share_network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
40-
<a class="margin-right:15px" data-share_network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
38+
<a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
39+
<a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
40+
<a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
4141
</div>
42-
<a class="margin-right:15px" data-share_network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
42+
<a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
4343
</div>
4444
<a href="https://github.com/CoCreate-app/CoCreate-parallax" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
4545
</div>
4646
</div>
4747
<h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">A stunning css effect in which the background moves at a slower pace than the foreground. Resulting in 3D effect when users scroll up/down the webpage.</h1>
4848
<div id="parallax-section" class="display:flex flex-wrap:wrap">
4949
<div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
50-
<div id="parallax-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-install-section">
51-
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-install"]'>
50+
<div id="parallax-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#parallax-install-section">
51+
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" hover-target='[href="#parallax-install"]'>
5252
<h2 class="padding:5px_0px">Install</h2>
5353
<a class="margin-left:10px display:none" href="#parallax-install"><i class="fas fa-link"></i></a>
5454
</span>
@@ -57,8 +57,8 @@ <h2 class="padding:5px_0px">Install</h2>
5757
<p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
5858
<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.js&lt;/script&gt;</code></pre>
5959

60-
<div id="parallax-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-usage-section">
61-
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-usage"]'>
60+
<div id="parallax-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#parallax-usage-section">
61+
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" hover-target='[href="#parallax-usage"]'>
6262
<h2 class="padding:5px_0px">Usage</h2>
6363
<a class="margin-left:10px display:none" href="#parallax-usage"><i class="fas fa-link"></i></a>
6464
</span>
@@ -72,37 +72,37 @@ <h2 class="padding:5px_0px">Usage</h2>
7272
<p class="padding:10px_0px line-height:1.5">This is parallax usage</p>
7373
<p class="padding:10px_0px line-height:1.5">This is parallax usage</p>
7474
</div>
75-
<div id="parallax-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-attributes-section">
76-
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-attributes"]'>
75+
<div id="parallax-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#parallax-attributes-section">
76+
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" hover-target='[href="#parallax-attributes"]'>
7777
<h2 class="padding:5px_0px">Attributes</h2>
7878
<a class="margin-left:10px display:none" href="#parallax-attributes"><i class="fas fa-link"></i></a>
7979
</span>
8080
</div>
8181
<ul class="list-style-type:none ">
8282
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
83-
<h4><span>data-parallax</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
83+
<h4><span>parallax</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
8484
<p>parallax-attribute</p>
8585
</li>
8686
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
87-
<h4><span>data-parallax</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
87+
<h4><span>parallax</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
8888
<p>parallax-attribute</p>
8989
</li>
9090
</ul>
9191
</div>
9292

9393
<div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
9494
<!-- SandBox -->
95-
<div id="parallax-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-demo-section">
96-
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-demo"]'>
95+
<div id="parallax-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#parallax-demo-section">
96+
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" hover-target='[href="#parallax-demo"]'>
9797
<h2 class="padding:5px_0px">Demo</h2>
9898
<a class="margin-left:10px display:none" href="#parallax-demo"><i class="fas fa-link"></i></a>
9999
</span>
100100
</div>
101101
<div class="position:sticky top:0 padding:15px_0px height:100vh">
102102
<div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
103103
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">
104-
<a class="margin-right:10px" id="preview" data-show="preview" data-hide="code"><i class="far fa-eye"></i></a>
105-
<a class="margin-right:10px hidden" id="code" data-show="code" data-hide="preview"><i class="fas fa-code"></i></a>
104+
<a class="margin-right:10px" id="preview" show="preview" hide="code"><i class="far fa-eye"></i></a>
105+
<a class="margin-right:10px hidden" id="code" show="code" hide="preview"><i class="fas fa-code"></i></a>
106106
<!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>-->
107107
<a target="modal" href="module_activity_datatable.html" pass-collection="modules" pass-document_id="" pass-fetch_value="" pass-prefix="" pass_to="render" modal-width="600px" modal-height="400px" modal-color="#229954"
108108
modal-header="false" class="margin-right:10px">
@@ -122,7 +122,7 @@ <h2 class="padding:5px_0px">Demo</h2>
122122
<div class="svSplitter svHorizontal"> </div>
123123

124124
<div class="svPanel">
125-
<iframe data-get_value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
125+
<iframe get-value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
126126
</div>
127127

128128
</div>

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.parallax {
1+
[parallax-src] {
22
position: relative;
33
opacity: 0.65;
44
background-attachment: fixed;

‎src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ function CoCreateParallax()
77
for (var i=0; i<parallaxEls.length; i++) {
88
var parallaxEl = parallaxEls.item(i);
99

10-
parallaxEl.style.backgroundImage = 'url('+parallaxEl.getAttribute('data-parallax_src')+')';
11-
parallaxEl.style.height = parallaxEl.getAttribute('data-parallax_height');
10+
parallaxEl.style.backgroundImage = 'url('+parallaxEl.getAttribute('parallax-src')+')';
11+
parallaxEl.style.height = parallaxEl.getAttribute('parallax-height');
1212
}
1313

1414
}

0 commit comments

Comments
 (0)