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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy