Skip to content

Instantly share code, notes, and snippets.

@IntrovertHedgehog

IntrovertHedgehog/camon.markdown

Last active June 3, 2022 15:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save IntrovertHedgehog/0d1a425727d6b38873f9c991c07d1598 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save IntrovertHedgehog/0d1a425727d6b38873f9c991c07d1598 to your computer and use it in GitHub Desktop.
Download ZIP
camon♥
Raw
index.html
<div class="tim u">
<span id='iu'></span>
</div>
<div class="toggleWrapper">
<input type="checkbox" class="dn" id="dn"/>
<label for="dn" class="toggle">
<span class="toggle__handler">
</label>
<div class="bear-body s1">
<span class="eye left"></span>
<span class="eye right"></span>
</div>
</div>
<div class="tim d">
<span id='hoc'>Nhấn vào mũi</span>
</div>
Raw
script.js
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ?
`rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
: null;
}
let $background2 = "#F67280";
let $background1 = "#364F6B";
let $bearbody2 = "#8675A9";
let $bearbody1 = "#91C788";
let $bearmouth = "#F5F5F5";
let kyniem = [
'Ùkm!',
'kem chúi',
'bánh tiêu',
'khoai mỡ',
'trà đào',
'trà sữa',
'kem bánh cá',
'mọi chiều thứ 6 lớp 12',
'chợ nhật tảo',
'circle K gần Tam Khôi',
'vườn sả',
'lẩu chay trước cổng khoa học tự nhiên',
'xem điểm đại học trong nhà văn hóa sinh viên',
'làm cổng trại 26/3',
'đi mua lồng đèn bị lạc ở bến xe miền đông',
'lmh chờ mình tới đêm',
'lồng đèn sáng (hên)',
'xin lỗi lmh',
'chạy 150 đưa hồ sơ ở cs1',
'uống phúc long ăn mừng',
'làm slides tới 8h',
'nộp trước deadline 2p (thầy Tuần)',
'làm sách nổi (cô hồng minh)',
'làm vlog',
'hối hận vì làm vlog',
'làm màn kéo cho vở kịch',
'nó hoạt động (quá ghê)',
'(thầy) trí để quên đt',
'chụp gần 12 tấm hình',
'giữ 1 tấm',
'phơi áo ở trường',
'2 cái áo thể dục lủng lẳng',
'tắm mưa',
'bị lmh cấm tắm mưa',
'vẫn tắm mưa',
'ở lại trường ban đêm',
'thắt bím tóc cho lmh nhưng không thành',
'lmh vui',
'♡',
'ôn thi học kì',
'ngủ trưa trên ghế đá',
'giả bộ đau tim khi xem r/awww',
'thích chó',
'thích toán',
'thích xem phim ma',
'sợ ma',
'thích ở lại trường đêm khuya',
'sợ ma',
'...',
'sợ bố lmh',
'thích lmh',
'...',
'anh chỉ muốn em vui',
'ngủ ngon'
]
let kn = 0;
function switchHandler() {
if ($('body').css('background-color') == hexToRgb($background2)) {
$("body").css("background-color", $background1);
$(".toggle__handler").css("background-color", $bearbody1);
$(".bear-body").css("border-bottom", `150px solid ${$bearbody1}`);
$(".bear-body").removeClass("s2");
$(".bear-body").addClass("s1");
$('#hoc').html(kyniem[kn++]);
$('#iu').css('visibility', 'hidden');
$('#hoc').css('visibility', 'visible');
$('#iu').css('opacity', '0');
$('#hoc').css('opacity', '1');
} else {
$("body").css("background-color", $background2);
$(".toggle__handler").css("background-color", $bearbody2);
$(".bear-body").css("border-bottom", `150px solid ${$bearbody2}`);
$(".bear-body").removeClass("s1");
$(".bear-body").addClass("s2");
$('#iu').html(kyniem[kn++]);
$('#hoc').css('visibility', 'hidden');
$('#iu').css('visibility', 'visible');
$('#hoc').css('opacity', '0');
$('#iu').css('opacity', '1');
}
}
document.querySelector('.toggle').onclick = switchHandler;
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
$bearbody2: #8675A9;
$bearbody1: #91C788;
$orange: #F8B400;
$beareye: #3d2526;
$yellow: #EAFFD0;
$bearmouth: #F5F5F5;
$background2: #FF9999;
$background1: #364F6B;
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
body {
background-color: $background1;
height: 100vh;
transition-duration: .5s;
font-family: 'Nunito', sans-serif;
}
span {
// transition-duration: .5s;
}
.toggleWrapper {
position: absolute;
top: 50%;
left: 50%;
padding: 0 200px;
transform: translate3d(-50%, -50%, 0);
input {
position: absolute;
left: -99em;
}
}
.toggle {
cursor: pointer;
display: inline-block;
position: absolute;
width: 90px;
top: 36px;
left: 50%;
transform: translateX(-50%);
height: 40px;
background-color: $bearmouth;
border-radius: 90px - 6;
z-index: 2;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition-duration: .5s;
}
.toggle__handler {
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
left: 3px;
width: 40px - 6;
height: 40px - 6;
background-color: $bearbody1;
border-radius: 50px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(-45deg);
transition-duration: .5s;
}
input:checked {
+ .toggle {
&:after {
color: #ffffff;
}
.toggle__handler {
transform: translate3d(49px, 0, 0) rotate(0);
}
+ .bear-body {
transform: rotateY(180deg);
}
}
}
#iu {
visibility: hidden;
opacity: 0;
color: $beareye;
}
#hoc {
color: $bearmouth;
}
#iu, #hoc {
font-size: min(8vw, 66px);
transition: opacity .5s;
}
.tim {
position: absolute;
text-align: center;
height: auto;
width: 100%;
}
.u {
bottom: calc(50% + 150px);
}
.d {
top: calc(50% + 150px);
}
.bear-body.s1 {
position: relative;
border-radius: 20px 10px 5px;
transition-duration: .5s;
border-bottom: 150px solid $bearbody1;
border-left: 20px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 94px;
&::before, &::after {
content: '';
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
top: -16px;
background: radial-gradient($bearmouth 5px, $bearbody1 6px);
transition-duration: .5s;
}
&::before {
left: -12.5px;
}
&::after {
right: -12.5px;
}
.eye {
position: absolute;
top: 18px;
background: $beareye;
height: 14px;
width: 14px;
border-radius: 50%;
background-image: radial-gradient(circle at 4px, white 1px, $beareye 2px);
&.left {
left: 20px;
animation: blink 3s ease-in-out infinite;
}
&.right {
left: 46px;
animation: blink 3.5s ease-in-out infinite;
}
}
}
.bear-body.s2 {
position: relative;
border-radius: 20px 10px 5px;
transition-duration: .5s;
border-bottom: 150px solid $bearbody1;
border-left: 20px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 94px;
&::before, &::after {
content: '';
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
top: -16px;
background: radial-gradient($bearmouth 5px, $bearbody2 6px);
transition-duration: .5s;
}
&::before {
left: -12.5px;
}
&::after {
right: -12.5px;
}
.eye {
position: absolute;
top: 18px;
background: $beareye;
height: 14px;
width: 14px;
border-radius: 50%;
background-image: radial-gradient(circle at 4px, white 1px, $beareye 2px);
&.left {
left: 20px;
animation: blink 3s ease-in-out infinite;
}
&.right {
left: 46px;
animation: blink 3.5s ease-in-out infinite;
}
}
}
@keyframes blink {
85% {
transform: rotateX(0deg);
}
90% {
transform: rotateX(90deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment