new destructr script
This commit is contained in:
Eric Lay
parent
30c566654d
commit
652fbdcc18
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -854,7 +854,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" rows="8" id="comment" placeholder="Message" ></textarea>
|
||||
<textarea class="form-control" rows="8" id="message" placeholder="Message" ></textarea>
|
||||
</div><!--/.form-group-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@
|
|||
<h1 class="update_taital">Get Every Update.... </h1>
|
||||
<form action="/action_page.php">
|
||||
<div class="form-group">
|
||||
<textarea class="update_mail" placeholder="Massage" rows="5" id="comment" name="Massage"></textarea>
|
||||
<textarea class="update_mail" placeholder="Massage" rows="5" id="message" name="Massage"></textarea>
|
||||
</div>
|
||||
<div class="subscribe_bt"><a href="#">Subscribe Now</a></div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -455,9 +455,9 @@
|
|||
<div class="col-md-12">
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="message"
|
||||
placeholder="Message"
|
||||
type="type"
|
||||
Message="Name"
|
||||
>
|
||||
Message </textarea
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,374 +1,332 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="js/destruct.js"></script>
|
||||
<title>Onepage - clean responsive HTML5 themes - thomsoon.com</title>
|
||||
|
||||
<meta name="description" content="Free download theme onepage, clean and modern responsive for all"/>
|
||||
<meta name="keywords" content="responsive, html5, onepage, themes, template, clean layout, free web"/>
|
||||
<meta name="author" content="Thomsoon.com"/>
|
||||
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/reset.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
|
||||
|
||||
</head>
|
||||
<meta
|
||||
name="description"
|
||||
content="Free download theme onepage, clean and modern responsive for all"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="responsive, html5, onepage, themes, template, clean layout, free web"
|
||||
/>
|
||||
<meta name="author" content="Thomsoon.com" />
|
||||
|
||||
<body>
|
||||
<link rel="shortcut icon" href="img/favicon.png" />
|
||||
|
||||
<div class="container">
|
||||
<link rel="stylesheet" type="text/css" href="css/reset.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- section start-page -->
|
||||
|
||||
<!-- section start-page -->
|
||||
<section class="start-page parallax-background" id="home">
|
||||
<div class="opacity"></div>
|
||||
<div class="content">
|
||||
<div class="text">
|
||||
<h1>
|
||||
Welcome<br />
|
||||
to our <span>website</span>
|
||||
</h1>
|
||||
<p>Please familiarize yourself with our offer</p>
|
||||
|
||||
<section class="start-page parallax-background" id="home">
|
||||
|
||||
<div class="opacity"></div>
|
||||
<div class="content">
|
||||
<div class="text">
|
||||
|
||||
<h1>Welcome<br/>
|
||||
to our <span>website</span></h1>
|
||||
<p>Please familiarize yourself with our offer</p>
|
||||
|
||||
<a href="#about-us"><div class="read-more">Read more</div></a>
|
||||
|
||||
<a href="#about-us"><div class="read-more">Read more</div></a>
|
||||
</div>
|
||||
<div class="arrow-down"></div>
|
||||
</div>
|
||||
<div class="arrow-down"></div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- section menu mobile -->
|
||||
|
||||
<section class="menu-media">
|
||||
|
||||
<div class="menu-content">
|
||||
|
||||
<div class="logo">Onepage</div>
|
||||
|
||||
<div class="icon"><a href="#"><img src="img/icons/menu-media.png"/></a></div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<ul class="menu-click">
|
||||
<!-- section menu mobile -->
|
||||
|
||||
<section class="menu-media">
|
||||
<div class="menu-content">
|
||||
<div class="logo">Onepage</div>
|
||||
|
||||
<div class="icon">
|
||||
<a href="#"><img src="img/icons/menu-media.png" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ul class="menu-click">
|
||||
<a href="#home"><li href="#home">HOME</li></a>
|
||||
<a href="#about-us"><li href="#about-us">ABOUT US</li></a>
|
||||
<a href="#portfolio"><li href="#portfolio">PORTFOLIO</li></a>
|
||||
<a href="#contact"><li href="#contact">CONTACT</li></a>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- section menu -->
|
||||
|
||||
<section class="menu">
|
||||
|
||||
<div class="menu-content">
|
||||
|
||||
<div class="logo">Onepage</div>
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="#home">HOME</a></li>
|
||||
<li><a href="#about-us">ABOUT US</a></li>
|
||||
<li><a href="#portfolio">PORTFOLIO</a></li>
|
||||
<li><a href="#contact">CONTACT</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- section menu -->
|
||||
|
||||
<!-- section about us -->
|
||||
|
||||
<section class="about-us" id="about-us">
|
||||
|
||||
<h1>ABOUT US</h1>
|
||||
<hr/>
|
||||
<p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
|
||||
|
||||
<div class="column-one">
|
||||
|
||||
<div class="circle-one"></div>
|
||||
|
||||
<h2>RESPONSIVE<br/>LAYOUT</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="column-two">
|
||||
|
||||
<div class="circle-two"></div>
|
||||
|
||||
<h2>MINIMALIST<br/>CONTENT</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="column-three">
|
||||
|
||||
<div class="circle-three"></div>
|
||||
|
||||
<h2>FREE<br/>DOWNLOAD</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="menu">
|
||||
<div class="menu-content">
|
||||
<div class="logo">Onepage</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="clear"></div>
|
||||
<ul id="menu">
|
||||
<li><a href="#home">HOME</a></li>
|
||||
<li><a href="#about-us">ABOUT US</a></li>
|
||||
<li><a href="#portfolio">PORTFOLIO</a></li>
|
||||
<li><a href="#contact">CONTACT</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- portoflio-->
|
||||
<!-- section about us -->
|
||||
|
||||
<section class="portfolio" id="portfolio">
|
||||
<section class="about-us" id="about-us">
|
||||
<h1>ABOUT US</h1>
|
||||
<hr />
|
||||
<p class="title">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod
|
||||
</p>
|
||||
|
||||
<div class="column-one">
|
||||
<div class="circle-one"></div>
|
||||
|
||||
<div class="portfolio-margin">
|
||||
|
||||
<h1>PORTFOLIO</h1>
|
||||
<hr/>
|
||||
|
||||
<!-- 1 item portoflio-->
|
||||
|
||||
<ul class="grid">
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/1.png" alt="Portfolio item" />
|
||||
<h2>RESPONSIVE<br />LAYOUT</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="column-two">
|
||||
<div class="circle-two"></div>
|
||||
|
||||
<h2>MINIMALIST<br />CONTENT</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="column-three">
|
||||
<div class="circle-three"></div>
|
||||
|
||||
<h2>FREE<br />DOWNLOAD</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- portoflio-->
|
||||
|
||||
<section class="portfolio" id="portfolio">
|
||||
<div class="portfolio-margin">
|
||||
<h1>PORTFOLIO</h1>
|
||||
<hr />
|
||||
|
||||
<!-- 1 item portoflio-->
|
||||
|
||||
<ul class="grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/1.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 1</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 2 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/2.png" alt="Portfolio item" />
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 2 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/2.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 2</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 3 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/3.png" alt="Portfolio item" />
|
||||
<!-- 3 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/3.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 3</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<p>PORTFOLIO 3</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 4 item portoflio-->
|
||||
|
||||
<!-- 4 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/4.png" alt="Portfolio item" />
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/4.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 4</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<p>PORTFOLIO 4</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 5 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/5.png" alt="Portfolio item" />
|
||||
<!-- 5 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/5.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 5</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<p>PORTFOLIO 5</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 6 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/6.png" alt="Portfolio item" />
|
||||
<!-- 6 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/6.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 6</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 7 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/7.png" alt="Portfolio item" />
|
||||
<p>PORTFOLIO 6</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 7 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/7.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 7</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 8 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/8.png" alt="Portfolio item" />
|
||||
<p>PORTFOLIO 7</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 8 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/8.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 8</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 9 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/9.png" alt="Portfolio item" />
|
||||
<p>PORTFOLIO 8</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 9 item portoflio-->
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="img/portfolio/9.png" alt="Portfolio item" />
|
||||
<div class="text">
|
||||
<p>PORTFOLIO 9</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<p>PORTFOLIO 9</p>
|
||||
<p class="description">Your text here...</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<a href="#"><div class="read-more">Load more</div></a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<a href="#"><div class="read-more">Load more</div></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- partners-->
|
||||
<div class="clear"></div>
|
||||
|
||||
<section class="partners parallax-background-partners" id="partners">
|
||||
|
||||
<div class="opacity"></div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h2>Thanks for partners</h2>
|
||||
|
||||
<div class="logo">
|
||||
|
||||
<a href="#"><img src="img/logos/alex1.png"></a>
|
||||
<a href="#"><img src="img/logos/archiq.png"></a>
|
||||
<a href="#"><img src="img/logos/thomsoon.png"></a>
|
||||
<a href="#"><img src="img/logos/alex2.png"></a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- partners-->
|
||||
|
||||
</section>
|
||||
<section class="partners parallax-background-partners" id="partners">
|
||||
<div class="opacity"></div>
|
||||
|
||||
<div class="content">
|
||||
<h2>Thanks for partners</h2>
|
||||
|
||||
<div class="logo">
|
||||
<a href="#"><img src="img/logos/alex1.png" /></a>
|
||||
<a href="#"><img src="img/logos/archiq.png" /></a>
|
||||
<a href="#"><img src="img/logos/thomsoon.png" /></a>
|
||||
<a href="#"><img src="img/logos/alex2.png" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact-->
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<h1>Contact</h1>
|
||||
<hr />
|
||||
|
||||
|
||||
<!-- Contact-->
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<h1>Contact</h1>
|
||||
<hr/>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="form">
|
||||
|
||||
<form action="#" method="post" enctype="text/plain">
|
||||
|
||||
<input name="your-name" id="your-name" value="YOUR NAME" />
|
||||
<input name="your-email" id="your-email" value="YOUR E-MAIL" />
|
||||
|
||||
<textarea id="message" name="message" >MESSAGE</textarea>
|
||||
|
||||
<a href="#">
|
||||
<div class="button">
|
||||
<span>SEND</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<input name="your-name" id="your-name" value="YOUR NAME" />
|
||||
<input name="your-email" id="your-email" value="YOUR E-MAIL" />
|
||||
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="YOUR MESSAGE"
|
||||
></textarea>
|
||||
|
||||
<a href="#">
|
||||
<div class="button">
|
||||
<span>SEND</span>
|
||||
</div>
|
||||
</a>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="contact-text">
|
||||
|
||||
To contact us please use the contact form visible<br/><br/>
|
||||
To contact us please use the contact form visible<br /><br />
|
||||
|
||||
When sending files, please use<br/>
|
||||
the following e-mail<br/><br/>
|
||||
When sending files, please use<br />
|
||||
the following e-mail<br /><br />
|
||||
|
||||
<strong>Tomasz Mazurczak</strong><br/><br/>
|
||||
<strong>Tomasz Mazurczak</strong><br /><br />
|
||||
|
||||
e-mail: <strong>contact@thomsoon.com</strong>
|
||||
|
||||
e-mail: <strong>contact@thomsoon.com</strong>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="footer">
|
||||
<div class="margin">
|
||||
<div class="menu-footer">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#">Privacy policy</a>
|
||||
<a href="#">RSS</a>
|
||||
<a href="#">Facebook</a>
|
||||
</div>
|
||||
|
||||
<section class="footer">
|
||||
|
||||
<div class="margin">
|
||||
|
||||
<div class="menu-footer">
|
||||
|
||||
<a href="#home">Home</a>
|
||||
<a href="#">Privacy policy</a>
|
||||
<a href="#">RSS</a>
|
||||
<a href="#">Facebook</a>
|
||||
|
||||
<div class="copyright">© 2014. All Rights Reserved Thomsoon.com</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright">© 2014. All Rights Reserved Thomsoon.com</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Scripts -->
|
||||
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
|
||||
<script src="js/jquery.parallax.js"></script> <!-- jQuery Parallax -->
|
||||
<script src="js/jquery.nicescroll.js"></script> <!-- jQuery NiceScroll -->
|
||||
<script src="js/jquery.sticky.js"></script> <!-- jQuery Stick Menu -->
|
||||
<script src="js/script.js"></script> <!-- All script -->
|
||||
|
||||
</body>
|
||||
<!-- Scripts -->
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
|
||||
></script>
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery.parallax.js"></script>
|
||||
<!-- jQuery Parallax -->
|
||||
<script src="js/jquery.nicescroll.js"></script>
|
||||
<!-- jQuery NiceScroll -->
|
||||
<script src="js/jquery.sticky.js"></script>
|
||||
<!-- jQuery Stick Menu -->
|
||||
<script src="js/script.js"></script>
|
||||
<!-- All script -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -755,6 +755,7 @@
|
|||
<div class="col-md-12">
|
||||
<input
|
||||
class="contactusmess"
|
||||
id="message"
|
||||
placeholder="Message"
|
||||
type="type"
|
||||
Message="Name"
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@
|
|||
<input class="contactus" placeholder="Phone Number" type="type" name="Phone Number">
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<textarea class="textarea" placeholder="Message" type="type" Message="Name">Message </textarea>
|
||||
<textarea class="textarea" id="message" placeholder="Message" type="type" Message="Name"></textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button class="send_btn">Send</button>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,134 @@
|
|||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
1672
lumia/index.html
1672
lumia/index.html
File diff suppressed because it is too large
Load Diff
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -457,7 +457,7 @@ License URL: http://creativecommons.org/licenses/by/3.0/
|
|||
<form>
|
||||
<input type="text" value="Name " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
|
||||
<input type="text" value="info@mail.com *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email@domain.com *';}">
|
||||
<textarea onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;">Message *</textarea>
|
||||
<textarea id="message" onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;"></textarea>
|
||||
<p class="conditions"> <label><span>*</span>scelerisque sit amet felis sit nunc.</label></p>
|
||||
<span class="submit-btn"><input type="submit" value="Send"></span>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -1,349 +1,493 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="js/destruct.js"></script>
|
||||
<title>Superfresh Bootstrap Template</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
<!-- stylesheet css -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="css/nivo-lightbox.css">
|
||||
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
|
||||
<link rel="stylesheet" href="css/templatemo-style.css">
|
||||
<!-- google web font css -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target=".navbar-collapse" id="top">
|
||||
<!-- navigation -->
|
||||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span></button>
|
||||
<a href="#" class="navbar-brand">Superfresh.</a></div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#home" class="smoothScroll">HOME</a></li>
|
||||
<li><a href="#service" class="smoothScroll">SERVICE</a></li>
|
||||
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
|
||||
<li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
|
||||
<li><a href="#pricing" class="smoothScroll">PRICE</a></li>
|
||||
<li><a href="#contact" class="smoothScroll">CONTACT</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- home section -->
|
||||
<div id="home">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
|
||||
<h2>welcome to</h2>
|
||||
<h1>Superfresh <strong>Design Studio</strong></h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
<a href="#service" class="btn btn-default smoothScroll">GET STARTED</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- service section -->
|
||||
<div id="service">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Here's How we work.</h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4"> <i class="fa fa-paper-plane"></i>
|
||||
<h3>Research.</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4"> <i class="fa fa-bell-o"></i>
|
||||
<h3>Design.</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4"> <i class="fa fa-coffee"></i>
|
||||
<h3>Coding.</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about section -->
|
||||
<div id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>The Superfresh Story</h2>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6"><img src="images/about-img.jpg" class="img-responsive" alt="about img"></div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3>ABOUT US</h3>
|
||||
<h4>talented Designers & Developers.</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- team section -->
|
||||
<div id="team">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Behind the Design Studio.</h2>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3"><img src="images/team1.jpg" class="img-responsive" alt="team img">
|
||||
<h3>James Smith</h3>
|
||||
<h4>Creative Director</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3"><img src="images/team2.jpg" class="img-responsive" alt="team img">
|
||||
<h3>Jonny Doe</h3>
|
||||
<h4>CEO / CO-Founder</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3"><img src="images/team3.jpg" class="img-responsive" alt="team img">
|
||||
<h3>Jonathan Ive </h3>
|
||||
<h4>Chief Design Office</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3"><img src="images/team4.jpg" class="img-responsive" alt="team img">
|
||||
<h3>Mary Lane</h3>
|
||||
<h4>UX Designer</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- portfolio section -->
|
||||
<div id="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="title">
|
||||
<h2>Works. Portfolio</h2>
|
||||
<head>
|
||||
<script src="js/destruct.js"></script>
|
||||
<title>Superfresh Bootstrap Template</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<!-- stylesheet css -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" href="css/nivo-lightbox.css" />
|
||||
<link rel="stylesheet" href="css/nivo_themes/default/default.css" />
|
||||
<link rel="stylesheet" href="css/templatemo-style.css" />
|
||||
<!-- google web font css -->
|
||||
<link
|
||||
href="http://fonts.googleapis.com/css?family=Raleway:400,300,600,700"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target=".navbar-collapse" id="top">
|
||||
<!-- navigation -->
|
||||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button
|
||||
class="navbar-toggle"
|
||||
data-toggle="collapse"
|
||||
data-target=".navbar-collapse"
|
||||
>
|
||||
<span class="icon icon-bar"></span>
|
||||
<span class="icon icon-bar"></span>
|
||||
<span class="icon icon-bar"></span>
|
||||
</button>
|
||||
<a href="#" class="navbar-brand">Superfresh.</a>
|
||||
</div>
|
||||
<!-- ISO section -->
|
||||
<div class="iso-section">
|
||||
<ul class="filter-wrapper clearfix">
|
||||
<li><a href="#" data-filter="*" class="selected opc-main-bg">All</a></li>
|
||||
<li><a href="#" class="opc-main-bg" data-filter=".html">Html</a></li>
|
||||
<li><a href="#" class="opc-main-bg" data-filter=".photoshop">Photoshop</a></li>
|
||||
<li><a href="#" class="opc-main-bg" data-filter=".wordpress">Wordpress</a></li>
|
||||
<li><a href="#" class="opc-main-bg" data-filter=".mobile">Mobile</a></li>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#home" class="smoothScroll">HOME</a></li>
|
||||
<li><a href="#service" class="smoothScroll">SERVICE</a></li>
|
||||
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
|
||||
<li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
|
||||
<li><a href="#pricing" class="smoothScroll">PRICE</a></li>
|
||||
<li><a href="#contact" class="smoothScroll">CONTACT</a></li>
|
||||
</ul>
|
||||
<div class="iso-box-section">
|
||||
<div class="iso-box-wrapper col4-iso-box">
|
||||
<div class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img1.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img1.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img2.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img2.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img3.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img3.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img4.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img4.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img5.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img5.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img6.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img6.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img7.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img7.jpg" alt="portfolio img"></a></div>
|
||||
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img8.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img8.jpg" alt="portfolio img"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- home section -->
|
||||
<div id="home">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
|
||||
<h2>welcome to</h2>
|
||||
<h1>Superfresh <strong>Design Studio</strong></h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat.
|
||||
</p>
|
||||
<a href="#service" class="btn btn-default smoothScroll"
|
||||
>GET STARTED</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- service section -->
|
||||
<div id="service">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Here's How we work.</h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<i class="fa fa-paper-plane"></i>
|
||||
<h3>Research.</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<i class="fa fa-bell-o"></i>
|
||||
<h3>Design.</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<i class="fa fa-coffee"></i>
|
||||
<h3>Coding.</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about section -->
|
||||
<div id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>The Superfresh Story</h2>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<img
|
||||
src="images/about-img.jpg"
|
||||
class="img-responsive"
|
||||
alt="about img"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h3>ABOUT US</h3>
|
||||
<h4>talented Designers & Developers.</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
|
||||
elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore
|
||||
magna aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
||||
erat volutpat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- team section -->
|
||||
<div id="team">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Behind the Design Studio.</h2>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<img src="images/team1.jpg" class="img-responsive" alt="team img" />
|
||||
<h3>James Smith</h3>
|
||||
<h4>Creative Director</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<img src="images/team2.jpg" class="img-responsive" alt="team img" />
|
||||
<h3>Jonny Doe</h3>
|
||||
<h4>CEO / CO-Founder</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<img src="images/team3.jpg" class="img-responsive" alt="team img" />
|
||||
<h3>Jonathan Ive</h3>
|
||||
<h4>Chief Design Office</h4>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<img src="images/team4.jpg" class="img-responsive" alt="team img" />
|
||||
<h3>Mary Lane</h3>
|
||||
<h4>UX Designer</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- portfolio section -->
|
||||
<div id="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="title">
|
||||
<h2>Works. Portfolio</h2>
|
||||
</div>
|
||||
<!-- ISO section -->
|
||||
<div class="iso-section">
|
||||
<ul class="filter-wrapper clearfix">
|
||||
<li>
|
||||
<a href="#" data-filter="*" class="selected opc-main-bg"
|
||||
>All</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="opc-main-bg" data-filter=".html">Html</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="opc-main-bg" data-filter=".photoshop"
|
||||
>Photoshop</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="opc-main-bg" data-filter=".wordpress"
|
||||
>Wordpress</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="opc-main-bg" data-filter=".mobile"
|
||||
>Mobile</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="iso-box-section">
|
||||
<div class="iso-box-wrapper col4-iso-box">
|
||||
<div
|
||||
class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"
|
||||
>
|
||||
<a
|
||||
href="images/portfolio-img1.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img1.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div
|
||||
class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"
|
||||
>
|
||||
<a
|
||||
href="images/portfolio-img2.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img2.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
|
||||
<a
|
||||
href="images/portfolio-img3.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img3.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12">
|
||||
<a
|
||||
href="images/portfolio-img4.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img4.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12">
|
||||
<a
|
||||
href="images/portfolio-img5.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img5.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div
|
||||
class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"
|
||||
>
|
||||
<a
|
||||
href="images/portfolio-img6.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img6.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12">
|
||||
<a
|
||||
href="images/portfolio-img7.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img7.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
|
||||
<a
|
||||
href="images/portfolio-img8.jpg"
|
||||
data-lightbox-gallery="portfolio-gallery"
|
||||
><img src="images/portfolio-img8.jpg" alt="portfolio img"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pricing section -->
|
||||
<div id="pricing">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Pricing tables</h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Basic Plan</h3>
|
||||
<small>$ 10 monthly</small></div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Business Plan</h3>
|
||||
<small>$ 10 monthly</small></div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Student Plan</h3>
|
||||
<small>$ 10 monthly</small></div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- contact section -->
|
||||
<div id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Tell Us About You.</h2>
|
||||
</div>
|
||||
<form action="#" method="post">
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input type="text" placeholder="Name" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input type="email" placeholder="Email" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<textarea placeholder="Message" class="form-control" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<input type="text" placeholder="Subject" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<input type="submit" value="SEND MESSAGE" class="form-control">
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer section -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h2>Reach Office.</h2>
|
||||
<p>001 Lane Street, California, CA</p>
|
||||
<p>Email: <span>Hello[at]superfresh[dot]com</span></p>
|
||||
<p>Phone: <span>0024 203423 / 20342 2342</span></p>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h2>Social Us.</h2>
|
||||
<ul class="social-icons">
|
||||
<li><a href="#" class="fa fa-facebook"></a></li>
|
||||
<li><a href="#" class="fa fa-twitter"></a></li>
|
||||
<li><a href="#" class="fa fa-dribbble"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- copyright section -->
|
||||
<div class="copyright">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<p>© Superfresh 2084. All Rights Reserved | Design: templatemo</p>
|
||||
<!-- pricing section -->
|
||||
<div id="pricing">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Pricing tables</h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Basic Plan</h3>
|
||||
<small>$ 10 monthly</small>
|
||||
</div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Business Plan</h3>
|
||||
<small>$ 10 monthly</small>
|
||||
</div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="plan">
|
||||
<div class="plan-title">
|
||||
<h3>Student Plan</h3>
|
||||
<small>$ 10 monthly</small>
|
||||
</div>
|
||||
<ul>
|
||||
<li>1 GB SPACE</li>
|
||||
<li>20 GB BANDWIDTH</li>
|
||||
<li>20 MORE THEMES</li>
|
||||
<li>LIFETIME SUPPORT</li>
|
||||
</ul>
|
||||
<button class="btn btn-warning">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- scrolltop section -->
|
||||
<a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a>
|
||||
<!-- javascript js -->
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/nivo-lightbox.min.js"></script>
|
||||
<script src="js/smoothscroll.js"></script>
|
||||
<script src="js/jquery.nav.js"></script>
|
||||
<script src="js/isotope.js"></script>
|
||||
<script src="js/imagesloaded.min.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- contact section -->
|
||||
<div id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<h2>Tell Us About You.</h2>
|
||||
</div>
|
||||
<form action="#" method="post">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input type="text" placeholder="Name" class="form-control" />
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input type="email" placeholder="Email" class="form-control" />
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<textarea
|
||||
id="message"
|
||||
placeholder="Message"
|
||||
class="form-control"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<input type="text" placeholder="Subject" class="form-control" />
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
|
||||
diam nonummy
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<input
|
||||
type="submit"
|
||||
value="SEND MESSAGE"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer section -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h2>Reach Office.</h2>
|
||||
<p>001 Lane Street, California, CA</p>
|
||||
<p>Email: <span>Hello[at]superfresh[dot]com</span></p>
|
||||
<p>Phone: <span>0024 203423 / 20342 2342</span></p>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<h2>Social Us.</h2>
|
||||
<ul class="social-icons">
|
||||
<li><a href="#" class="fa fa-facebook"></a></li>
|
||||
<li><a href="#" class="fa fa-twitter"></a></li>
|
||||
<li><a href="#" class="fa fa-dribbble"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- divider section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
<div class="col-md-10 col-sm-10">
|
||||
<hr />
|
||||
</div>
|
||||
<div class="col-md-1 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- copyright section -->
|
||||
<div class="copyright">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<p>
|
||||
© Superfresh 2084. All Rights Reserved | Design: templatemo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- scrolltop section -->
|
||||
<a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a>
|
||||
<!-- javascript js -->
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/nivo-lightbox.min.js"></script>
|
||||
<script src="js/smoothscroll.js"></script>
|
||||
<script src="js/jquery.nav.js"></script>
|
||||
<script src="js/isotope.js"></script>
|
||||
<script src="js/imagesloaded.min.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
|
|
@ -469,9 +469,9 @@ License URL: http://creativecommons.org/licenses/by/3.0/
|
|||
</div>
|
||||
<form>
|
||||
<div class="form-left">
|
||||
<input type="text" placeholder="Name" required />
|
||||
<input type="text" placeholder="Email" required />
|
||||
<input type="text" placeholder="Phone" required />
|
||||
<input type="text" id="message" placeholder="Name" required />
|
||||
<input type="text" id="message" placeholder="Email" required />
|
||||
<input type="text" id="message" placeholder="Phone" required />
|
||||
</div>
|
||||
<div class="form-right">
|
||||
<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("*");
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
|
|
@ -21,9 +23,8 @@ window.addEventListener(
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Define the CSS for the melting animation
|
||||
var style = document.createElement('style');
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
|
|
@ -35,13 +36,99 @@ style.innerHTML = `
|
|||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to add 'melting' class to all text nodes
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
|
||||
elements.forEach(function(element) {
|
||||
element.classList.add('melting');
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the page
|
||||
document.addEventListener('click', meltText);
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
|
|
|||
Loading…
Reference in New Issue