영상대신에 배경이미지들 캔버스방식을 통한 고급스러운 느낌을, 개발로 연출 Web포트폴리오
고급스러움과 전문성이 공존하는 병원홈페이지, 정말 많은 병원들에서 병원홈페이지제작 및 병원추가개발은 하룹을 이용하신다는것을 이젠 많은 분들께서 알고 계실텐데요. 이번에도 하룹 개발팀이 매우 효과적으로 한 건 하였습니다.
우선 메인에 영상을 넣고 싶으실때, 꼭 영상촬영을 해야 할까요? 물론 가장 좋은것은 솔직히 멋지게 영상을 찍고, 배경에 영상을 까는게 확실히 좋다는것은 부정하진 못하겠습니다. 하지만 그 결정에 확신이 없으실 경우가 있죠. 이럴때 만약 하룹을 알았더라면?
저희는 그저 단순 이미지만으로도 충분히 원하시는 느낌과 효과를 낼 수 있도록 개발을 제안해드렸을 것입니다. 만약 그저 메인배경에 영상같은 느낌만을 원하시는것이라면, 영상촬영이 꼭 아니더라도, 실력있는 개발자들만 있다면, 충분히 가능한 사항이니 말이죠.
저희는 홈페이지에 영상을 삽입하는 대신, 캔바스방식에 개발방식을 활용하여, 고급스러운 느낌을 더욱 강조합니다. 섬세한 디자인과 부드러운 라인, 깔끔한 폰트 선택을 통해, 전반적인 디자인을 세련된 느낌으로 연출하였습니다.
혹시 이 글을 보시는분들중에는, 큰 병원에 소속되어있으신 개발자분들도 확인하시는것으로 알고 있으므로, 그 분들을 위해 일부 코드를 공개해보자면 아래와 같습니다. (참고해서 잘 개발하시길 바라겠습니다^^ 너무 어려우시면 언제든 저희 하룹에게 요청하시면, 바로 출동하여 전부 다 상세하게 개발해드릴 수 있도록 하겠습니다)
<!DOCTYPE html>
<html lang=”ko”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>하룹 빅터팀 캔버스 소스 기본방식</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”image-container”>
<img class=”image fade” src=”이미지1″>
<img class=”image fade” src=”이미지2″>
<img class=”image fade” src=”이미지3″>
<img class=”image fade” src=”이미지4″>
</div>
<script src=”script.js”></script>
</body>
</html>.image-container { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 2s ease-in-out; }
.image.fade { animation: fadeInOut 8s infinite; }
@keyframes fadeInOut { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.image:nth-child(1) { animation-delay: 0s; } .image:nth-child(2) { animation-delay: 2s; } .image:nth-child(3) { animation-delay: 4s; } .image:nth-child(4) { animation-delay: 6s; }
혹시 자바스크립트나 제이쿼리로 처리하고 싶으시다면 아래를 참고해주시면 됩니다.
$(document).ready(function() {
function fadeInOutImages() {
var currentImage = $(‘.image-container .image:first-child’);
currentImage.animate({ opacity: 1 }, 2000, function() {
setTimeout(function() {
currentImage.animate({ opacity: 0 }, 2000, function() {
currentImage.appendTo(‘.image-container’);
fadeInOutImages();
});
}, 2000);
});
}
fadeInOutImages();
});
개발하시다가보면, 어떤 창크기에서 문제나, 일부 오류등, 작은거 하나때문에 몇날 몇일이 걸리시는 경우가 있습니다. 우선 저희 하룹개발팀은 거의 대부분에 모든 오류까지 완벽하게 잡아드릴 수 있으며, 여기에 표현방식이나 구성 개발방식 그리고 웹디자인과 고객사용성 그리고 카피라이팅까지 전문적인 수준급 실력의 병원마케터들이 가능한 카피라이팅까지 선사해드릴 수 있습니다.
불가능한 사항도, 하룹과 만나면 결국 해결하거나 또다른 추가적인 차선책 및 해결책이 생겨버리게 되는 놀라운 마법, 고급스러움과 전문성이 함께 공존하는, 하룹 병원홈페이지제작 개발팀, 빅터팀에 기지가 발휘된 개발이였습니다. 병원원장님 및 병원관계자분들이라면, 하룹과 함께라면, 언제나 마음 놓고 의뢰하실 수 있습니다. 항상 병원에게 필요한 최고의 실력과 서비스로 만족 그 이상을 선사하는 하룹 개발팀이 되겠습니다. 감사합니다.