Skip to content

Commit 1d5b7fc

Browse files
caleman9791caleman9791
committed
ok
1 parent d68ab1a commit 1d5b7fc

File tree

11 files changed

+604
-1
lines changed

11 files changed

+604
-1
lines changed

‎blog_entradas/entrada1/index.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
5+
<style>
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
margin: 0;
12+
font-family: Arial, Helvetica, sans-serif;
13+
}
14+
15+
.header {
16+
text-align: center;
17+
padding: 32px;
18+
}
19+
20+
.row {
21+
display: -ms-flexbox; /* IE 10 */
22+
display: flex;
23+
-ms-flex-wrap: wrap; /* IE 10 */
24+
flex-wrap: wrap;
25+
padding: 0 4px;
26+
}
27+
28+
/* Create two equal columns that sits next to each other */
29+
.column {
30+
-ms-flex: 50%; /* IE 10 */
31+
flex: 50%;
32+
padding: 0 4px;
33+
}
34+
35+
.column img {
36+
margin-top: 8px;
37+
vertical-align: middle;
38+
}
39+
40+
/* Style the buttons */
41+
.btn {
42+
border: none;
43+
outline: none;
44+
padding: 10px 16px;
45+
background-color: #f1f1f1;
46+
cursor: pointer;
47+
font-size: 18px;
48+
}
49+
50+
.btn:hover {
51+
background-color: #ddd;
52+
}
53+
54+
.btn.active {
55+
background-color: #666;
56+
color: white;
57+
}
58+
</style>
59+
</meta>
60+
</head>
61+
<body>
62+
<!-- Header -->
63+
<div class="header" id="myHeader">
64+
<button class="btn" onclick="one()">
65+
1
66+
</button>
67+
<button class="btn active" onclick="two()">
68+
2
69+
</button>
70+
<button class="btn" onclick="four()">
71+
4
72+
</button>
73+
</div>
74+
<!-- Photo Grid -->
75+
<div class="row">
76+
<div class="column">
77+
<img src="/w3images/wedding.jpg" style="width:100%"/>
78+
<img src="/w3images/rocks.jpg" style="width:100%"/>
79+
<img src="/w3images/falls2.jpg" style="width:100%"/>
80+
<img src="/w3images/paris.jpg" style="width:100%"/>
81+
<img src="/w3images/nature.jpg" style="width:100%"/>
82+
<img src="/w3images/mist.jpg" style="width:100%"/>
83+
<img src="/w3images/paris.jpg" style="width:100%"/>
84+
</div>
85+
<div class="column">
86+
<img src="/w3images/underwater.jpg" style="width:100%"/>
87+
<img src="/w3images/ocean.jpg" style="width:100%"/>
88+
<img src="/w3images/wedding.jpg" style="width:100%"/>
89+
<img src="/w3images/mountainskies.jpg" style="width:100%"/>
90+
<img src="/w3images/rocks.jpg" style="width:100%"/>
91+
<img src="/w3images/underwater.jpg" style="width:100%"/>
92+
</div>
93+
<div class="column">
94+
<img src="/w3images/wedding.jpg" style="width:100%"/>
95+
<img src="/w3images/rocks.jpg" style="width:100%"/>
96+
<img src="/w3images/falls2.jpg" style="width:100%"/>
97+
<img src="/w3images/paris.jpg" style="width:100%"/>
98+
<img src="/w3images/nature.jpg" style="width:100%"/>
99+
<img src="/w3images/mist.jpg" style="width:100%"/>
100+
<img src="/w3images/paris.jpg" style="width:100%"/>
101+
</div>
102+
<div class="column">
103+
<img src="/w3images/underwater.jpg" style="width:100%"/>
104+
<img src="/w3images/ocean.jpg" style="width:100%"/>
105+
<img src="/w3images/wedding.jpg" style="width:100%"/>
106+
<img src="/w3images/mountainskies.jpg" style="width:100%"/>
107+
<img src="/w3images/rocks.jpg" style="width:100%"/>
108+
<img src="/w3images/underwater.jpg" style="width:100%"/>
109+
</div>
110+
</div>
111+
<script>
112+
// Get the elements with class="column"
113+
var elements = document.getElementsByClassName("column");
114+
115+
// Declare a loop variable
116+
var i;
117+
118+
// Full-width images
119+
function one() {
120+
for (i = 0; i < elements.length; i++) {
121+
elements[i].style.msFlex = "100%"; // IE10
122+
elements[i].style.flex = "100%";
123+
}
124+
}
125+
126+
// Two images side by side
127+
function two() {
128+
for (i = 0; i < elements.length; i++) {
129+
elements[i].style.msFlex = "50%"; // IE10
130+
elements[i].style.flex = "50%";
131+
}
132+
}
133+
134+
// Four images side by side
135+
function four() {
136+
for (i = 0; i < elements.length; i++) {
137+
elements[i].style.msFlex = "25%"; // IE10
138+
elements[i].style.flex = "25%";
139+
}
140+
}
141+
142+
// Add active class to the current button (highlight it)
143+
var header = document.getElementById("myHeader");
144+
var btns = header.getElementsByClassName("btn");
145+
for (var i = 0; i < btns.length; i++) {
146+
btns[i].addEventListener("click", function() {
147+
var current = document.getElementsByClassName("active");
148+
current[0].className = current[0].className.replace(" active", "");
149+
this.className += " active";
150+
});
151+
}
152+
153+
let imagenes=document.querySelectorAll("img");
154+
for (var i = imagenes.length - 1; i >= 0; i--) {
155+
imagenes[i].src="https://raw.githubusercontent.com/codefuncode/codefuncode/master/img/001.png";
156+
}
157+
</script>
158+
</body>
159+
</html>

‎ejemplos/full-page-parallax-scroll-effect.zip

6.55 KB
Binary file not shown.

‎ejemplos/full-page-parallax-scroll-effect/README.markdown

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Full Page Parallax Scroll Effect
2+
3+
A Pen created on CodePen.io. Original URL: [https://codepen.io/eehayman/pen/qdGZJr](https://codepen.io/eehayman/pen/qdGZJr).
4+
5+
A lightweight full page parallax scroll effect.

‎ejemplos/full-page-parallax-scroll-effect/dist/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>
6+
codefuncode
7+
</title>
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
9+
<link href="./style.css" rel="stylesheet">
10+
</link>
11+
</link>
12+
</meta>
13+
</head>
14+
<body>
15+
<!-- partial:index.partial.html -->
16+
<div class="container">
17+
<section class="background">
18+
<div class="content-wrapper">
19+
<p class="content-title">
20+
Mira !
21+
</p>
22+
<p class="content-subtitle">
23+
Efectos para tus aplicaciones
24+
</p>
25+
</div>
26+
</section>
27+
<section class="background">
28+
<div class="content-wrapper">
29+
<p class="content-title">
30+
Hermoso verdad ?
31+
</p>
32+
<p class="content-subtitle">
33+
Todo esto puedes hacer para tus clientes
34+
</p>
35+
</div>
36+
</section>
37+
<section class="background">
38+
<div class="content-wrapper">
39+
<p class="content-title">
40+
Servicios disponibles
41+
</p>
42+
<p class="content-subtitle">
43+
Oportunidad Única
44+
</p>
45+
</div>
46+
</section>
47+
</div>
48+
<!-- partial -->
49+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js">
50+
</script>
51+
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
52+
</script>
53+
<script src="./script.js">
54+
</script>
55+
</body>
56+
</html>

‎ejemplos/full-page-parallax-scroll-effect/dist/script.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// ------------- VARIABLES ------------- //
2+
var ticking = false;
3+
var isFirefox = (/Firefox/i.test(navigator.userAgent));
4+
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
5+
var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive)
6+
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
7+
var currentSlideNumber = 0;
8+
var totalSlideNumber = $(".background").length;
9+
10+
// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //
11+
function parallaxScroll(evt) {
12+
if (isFirefox) {
13+
//Set delta for Firefox
14+
delta = evt.detail * (-120);
15+
} else if (isIe) {
16+
//Set delta for IE
17+
delta = -evt.deltaY;
18+
} else {
19+
//Set delta for all other browsers
20+
delta = evt.wheelDelta;
21+
}
22+
23+
if (ticking != true) {
24+
if (delta <= -scrollSensitivitySetting) {
25+
//Down scroll
26+
ticking = true;
27+
if (currentSlideNumber !== totalSlideNumber - 1) {
28+
currentSlideNumber++;
29+
nextItem();
30+
}
31+
slideDurationTimeout(slideDurationSetting);
32+
}
33+
if (delta >= scrollSensitivitySetting) {
34+
//Up scroll
35+
ticking = true;
36+
if (currentSlideNumber !== 0) {
37+
currentSlideNumber--;
38+
}
39+
previousItem();
40+
slideDurationTimeout(slideDurationSetting);
41+
}
42+
}
43+
}
44+
45+
// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
46+
function slideDurationTimeout(slideDuration) {
47+
setTimeout(function() {
48+
ticking = false;
49+
}, slideDuration);
50+
}
51+
52+
// ------------- ADD EVENT LISTENER ------------- //
53+
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
54+
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);
55+
56+
// ------------- SLIDE MOTION ------------- //
57+
function nextItem() {
58+
var $previousSlide = $(".background").eq(currentSlideNumber - 1);
59+
$previousSlide.removeClass("up-scroll").addClass("down-scroll");
60+
}
61+
62+
function previousItem() {
63+
var $currentSlide = $(".background").eq(currentSlideNumber);
64+
$currentSlide.removeClass("down-scroll").addClass("up-scroll");
65+
}

0 commit comments

Comments
 (0)